/* grid */
body.grid > main,
.grid.section,
.grid:not(body, .section) {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--grid-gap);
}

.grid {
  container: grid / inline-size;
}

.grid > * > *,
.grid .block > * {
  position: relative;
}

.section.grid > * > * {
  grid-column-end: span 12;
}
.grid .col-1 { grid-column-end: span 1; }
.grid .col-2 { grid-column-end: span 2; }
.grid .col-3 { grid-column-end: span 3; }
.grid .col-4 { grid-column-end: span 4; }
.grid .col-5 { grid-column-end: span 5; }
.grid .col-6 { grid-column-end: span 6; }
.grid .col-7 { grid-column-end: span 7; }
.grid .col-8 { grid-column-end: span 8; }
.grid .col-9 { grid-column-end: span 9; }
.grid .col-10 { grid-column-end: span 10; }
.grid .col-11 { grid-column-end: span 11; }
.grid .col-12 { grid-column-end: span 12; }

.grid .row-1 { grid-row-end: span 1; }
.grid .row-2 { grid-column-end: span 2; }
.grid .row-3 { grid-column-end: span 3; }
.grid .row-4 { grid-column-end: span 4; }

.grid .off-1 { grid-column-start: 2; }
.grid .off-2 { grid-column-start: 3; }
.grid .off-3 { grid-column-start: 4; }
.grid .off-4 { grid-column-start: 5; }
.grid .off-5 { grid-column-start: 6; }
.grid .off-6 { grid-column-start: 7; }
.grid .off-7 { grid-column-start: 8; }
.grid .off-8 { grid-column-start: 9; }
.grid .off-9 { grid-column-start: 9; }
.grid .off-10 { grid-column-start: 10; }
.grid .off-11 { grid-column-start: 12; }

.section.grid.auto > div + div { margin-top: var(--grid-gap); }

@media (width >= 600px) {
  body.grid > main,
  .section.grid,
  .grid:not(body, .section) {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    gap: var(--grid-gap);
  }

  .section.grid > * {
    display: contents;
  }

  body.grid > main > *,
  .section.grid > * > *,
  .grid:not(body, .section) > * {
    display: flex;
    flex-direction: column;
    align-items: start;
  }

  body.grid.auto > main,
  .section.grid.auto,
  .grid.auto:not(body, .section) {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .grid .col-s-1 { grid-column-end: span 1; }
  .grid .col-s-2 { grid-column-end: span 2; }
  .grid .col-s-3 { grid-column-end: span 3; }
  .grid .col-s-4 { grid-column-end: span 4; }
  .grid .col-s-5 { grid-column-end: span 5; }
  .grid .col-s-6 { grid-column-end: span 6; }
  .grid .col-s-7 { grid-column-end: span 7; }
  .grid .col-s-8 { grid-column-end: span 8; }
  .grid .col-s-9 { grid-column-end: span 9; }
  .grid .col-s-10 { grid-column-end: span 10; }
  .grid .col-s-11 { grid-column-end: span 11; }
  .grid .col-s-12 { grid-column-end: span 12; }
}

@media (width >= 900px) {
  .grid .col-m-1 { grid-column-end: span 1; }
  .grid .col-m-2 { grid-column-end: span 2; }
  .grid .col-m-3 { grid-column-end: span 3; }
  .grid .col-m-4 { grid-column-end: span 4; }
  .grid .col-m-5 { grid-column-end: span 5; }
  .grid .col-m-6 { grid-column-end: span 6; }
  .grid .col-m-7 { grid-column-end: span 7; }
  .grid .col-m-8 { grid-column-end: span 8; }
  .grid .col-m-9 { grid-column-end: span 9; }
  .grid .col-m-10 { grid-column-end: span 10; }
  .grid .col-m-11 { grid-column-end: span 11; }
  .grid .col-m-12 { grid-column-end: span 12; }
}

@media (width >= 1200px) {
  .grid .col-l-1 { grid-column-end: span 1; }
  .grid .col-l-2 { grid-column-end: span 2; }
  .grid .col-l-3 { grid-column-end: span 3; }
  .grid .col-l-4 { grid-column-end: span 4; }
  .grid .col-l-5 { grid-column-end: span 5; }
  .grid .col-l-6 { grid-column-end: span 6; }
  .grid .col-l-7 { grid-column-end: span 7; }
  .grid .col-l-8 { grid-column-end: span 8; }
  .grid .col-l-9 { grid-column-end: span 9; }
  .grid .col-l-10 { grid-column-end: span 10; }
  .grid .col-l-11 { grid-column-end: span 11; }
  .grid .col-l-12 { grid-column-end: span 12; }
}

@media (width >= 1400px) {
  .grid .col-xl-1 { grid-column-end: span 1; }
  .grid .col-xl-2 { grid-column-end: span 2; }
  .grid .col-xl-3 { grid-column-end: span 3; }
  .grid .col-xl-4 { grid-column-end: span 4; }
  .grid .col-xl-5 { grid-column-end: span 5; }
  .grid .col-xl-6 { grid-column-end: span 6; }
  .grid .col-xl-7 { grid-column-end: span 7; }
  .grid .col-xl-8 { grid-column-end: span 8; }
  .grid .col-xl-9 { grid-column-end: span 9; }
  .grid .col-xl-10 { grid-column-end: span 10; }
  .grid .col-xl-11 { grid-column-end: span 11; }
  .grid .col-xl-12 { grid-column-end: span 12; }
}