/*
  Grid, Container, Breakpoints — Styleguide Kap. 3.3.
  Breakpoints: xs 0–479 · sm 480–767 · md 768–1023 · lg 1024–1279 · xl 1280+
  (Custom Properties können in @media-Feature-Queries nicht referenziert
  werden, daher sind die Breakpoint-Werte hier als Zahlen wiederholt.)
*/

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-6); /* 24px md */
}

@media (min-width: 1024px) {
  .container {
    padding-inline: var(--space-8); /* 32px lg/xl */
  }
}

@media (max-width: 767px) {
  .container {
    padding-inline: 20px; /* xs — expliziter Wert laut Styleguide Kap. 3.3 */
  }
}

.container--read {
  max-width: var(--container-read);
}

section {
  margin-block: var(--space-16); /* 64px xs */
}

@media (min-width: 768px) {
  section {
    margin-block: 80px; /* md — expliziter Wert laut Styleguide Kap. 3.3 */
  }
}

@media (min-width: 1024px) {
  section {
    margin-block: var(--space-30); /* 120px lg/xl */
  }
}