/* Werbestudio – Seitenraster
 *
 * Mobil   (< 768):   4 Spalten,  36px Seitenabstand, 10px Spaltenabstand
 * Tablet  (≥ 768):   8 Spalten,  36px Seitenabstand, 16px Spaltenabstand
 * Tablet  (≥ 992):  12 Spalten,  40px Seitenabstand, 16px Spaltenabstand
 * Desktop (≥ 1920): 16 Spalten,  72px Seitenabstand, 16px Spaltenabstand, max. 1776px
 * Breitere Screens: Raster bleibt 1776px, der Abstand links/rechts wächst.
 */

:root {
  --page-pad: 36px;
  --cols: 4;
  --grid-gap: 10px;
  --grid-max: 1776px;
}

@media (min-width: 768px) {
  :root {
    --cols: 8;
    --grid-gap: 16px;
  }
}

@media (min-width: 992px) {
  :root {
    --page-pad: 40px;
    --cols: 12;
  }
}

@media (min-width: 1920px) {
  :root {
    --page-pad: 72px;
    --cols: 16;
  }
}

.wrap {
  width: calc(100% - (2 * var(--page-pad)));
  max-width: var(--grid-max);
  margin-inline: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--grid-gap);
}