.grid {
  --columns: 12;
  --gutter: 3rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: 1fr;
}
.grid > .column {
  margin-bottom: var(--gutter);
}


.grid-projekte {
  --gutter: 3rem;
  --min: 18rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
  grid-auto-flow: dense;
}
.grid-projekte > .column-projekte {
  margin-bottom: var(--gutter);
}




.grid-concert {
  --gutter: 1.5rem;
  --min: 25rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
  grid-auto-flow: dense;
}
.grid-concert > .column-concert {
  margin-bottom: var(--gutter);
}

.grid-news {
  --gutter: 4rem;
  --min: 15rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
  grid-auto-flow: dense;
}
.grid-news > .column-news {
  margin-bottom: var(--gutter);
}

.autogrid {
  --gutter: 2rem;
  --min: 5rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
  grid-auto-flow: dense;
}

.autogridPreview {
    --gutter: 2rem;
    --min: 10rem;
    display: grid;
    grid-gap: var(--gutter);
    grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
    grid-auto-flow: dense;
  }


@media screen and (min-width: 40rem) {

  .grid {
    grid-template-columns: repeat(12, 3fr);
  }
  .grid > .column {
    grid-column: span var(--columns);
  }


}


@media screen and (max-width: 47rem) {

  .grid-projekte {
  --gutter: 3rem;
  --min: 13rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
  grid-auto-flow: dense;
}
.grid-projekte > .column-projekte {
  margin-bottom: var(--gutter);
}


}