:root{
  --item-margin: 0.5em;
}

.grid_img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

.grid_200{
  display:grid;
justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  list-style: none;
  grid-gap:2em;
}

.grid_200 ul li{
justify-content: center;
  list-style: none;
}
.grid_200 li{
  list-style: none;
}
.grid_200 div{
}
.grid_300{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  list-style: none;
  grid-gap: 10px;
}

.grid_300 ul li{
flex-direction: column;
justify-content: center;
  list-style: none;
grid-gap:2em;
}
.grid_300 li{
margin: var(--item-margin);
  list-style: none;
}
.grid_300 div{
margin: var(--item-margin);
}

.colitem_span2{
grid-column: auto / span 2;
}

@media (max-width:1400px) {
.colitem_span2{
grid-column:  auto;
}
}


.griditem{
margin:1em;
}

.gridleftitem{
margin-right:1em;
}

.gridrightitem{
margin-left:1em;
}

.gridcenteritem{
margin:0.5em; 
    justify-content:center;
    align-items: center;    
}

.gridimg {
    padding: 1em;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
}

.grid_center {
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
}

.grid_300
{
  display:grid;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
}
.grid_7{
  display:grid;
justify-content: center;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid_6{
  display:grid;
justify-content: center;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid_6_2fr_1{
  display:grid;
justify-content: center;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
}

.grid_5_2fr_1{
  display:grid;
justify-content: center;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
}

.grid_5{
  display:grid;
justify-content: center;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.grid_4{
  display:grid;
justify-content: center;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid_3_1fr_2fr_1fr{
  display:grid;
justify-content: center;
  grid-template-columns: 1fr 2fr 1fr;
}

.grid_3_hidem_3col{
  display:grid;
justify-content: center;
  grid-template-columns: 1fr 1fr 1fr;
}

.grid_3{
  display:grid;
justify-content: center;
  grid-template-columns: 1fr 1fr 1fr;
}

.grid_1fr_3fr_4fr
{
  display:grid;
justify-content: center;
  grid-template-columns: 1fr 3fr 5fr 1fr;
}

.grid_2_1fr_3fr
{
  display:grid;
justify-content: center;
  grid-template-columns: 1fr 3fr;
}

.grid_2_1fr_2fr
{
  display:grid;
justify-content: center;
  grid-template-columns: 1fr 2fr;
}

.grid_2_3fr_1fr
{
  display:grid;
justify-content: center;
  grid-template-columns: 3fr 1fr;
}

.grid_2
{
  display:grid;
justify-content: center;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 800px) {
.grid_2
{
  display:grid;
justify-content: center;
  grid-template-columns: 1fr;
}
}

@media (max-width: 1200px) {
.grid_6{
  display:grid;
justify-content: center;
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 1200px) {
.grid_7{
  display:grid;
justify-content: center;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.grid_3{
  display:grid;
justify-content: center;
  grid-template-columns: 1fr 1fr;
}

.grid_3_hidem_3col{
  display:grid;
justify-content: center;
  grid-template-columns: 1fr 1fr;
}

.grid_3_hidem_3col > div:nth-child(3n) {
  display: none;
}
}