/* Grid utilities: 24-column layout */
:root {
  --layout-margin-x: 1rem;
  --layout-padding-x: 1rem;
  --grid-columns: 24;
}

.margin-0-10 {
  margin: 0 var(--layout-margin-x);
}

.margin-125-0 {
  margin: 12.5rem 0;
}

.margin-125-0-0-0 {
  margin: 12.5rem 0 0 0;
}

.margin-0-0-125-0 {
  margin: 0 0 12.5rem 0;
}

.margin-150-0 {
  margin: 15rem 0;
}

.margin-200-0 {
  margin: 20rem 0;
}

.padding-0-10 {
  padding: 0 var(--layout-padding-x);
}

.grid {
  display: grid;
}

.grid-24 {
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
}

.grid-14 {
  grid-template-columns: repeat(14, minmax(0, 1fr));
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-auto-flow-dense {
  grid-auto-flow: dense;
}

.gap-10 {
  gap: 1rem;
}

.gap-0-10 {
  gap: 0 1rem;
}

.gap-125-0 {
  gap: 12.5rem 0;
}

.col {
  grid-column: var(--col-start, auto) / span var(--col-span, 24);
}

.col-14 {
  grid-column: var(--col-start, auto) / span var(--col-span, 24);
}

.col-full {
  grid-column: 1 / 25;
}

.height-100 {
  height: 100%;
}

/* Start utilities: col-start-1 ... col-start-24 */
.col-start-1 {
  --col-start: 1;
}

.col-start-2 {
  --col-start: 2;
}

.col-start-3 {
  --col-start: 3;
}

.col-start-4 {
  --col-start: 4;
}

.col-start-5 {
  --col-start: 5;
}

.col-start-6 {
  --col-start: 6;
}

.col-start-7 {
  --col-start: 7;
}

.col-start-8 {
  --col-start: 8;
}

.col-start-9 {
  --col-start: 9;
}

.col-start-10 {
  --col-start: 10;
}

.col-start-11 {
  --col-start: 11;
}

.col-start-12 {
  --col-start: 12;
}

.col-start-13 {
  --col-start: 13;
}

.col-start-14 {
  --col-start: 14;
}

.col-start-15 {
  --col-start: 15;
}

.col-start-16 {
  --col-start: 16;
}

.col-start-17 {
  --col-start: 17;
}

.col-start-18 {
  --col-start: 18;
}

.col-start-19 {
  --col-start: 19;
}

.col-start-20 {
  --col-start: 20;
}

.col-start-21 {
  --col-start: 21;
}

.col-start-22 {
  --col-start: 22;
}

.col-start-23 {
  --col-start: 23;
}

.col-start-24 {
  --col-start: 24;
}

/* Span utilities: 2,4,6,...,24 */
.col-span-2 {
  --col-span: 2;
}

.col-span-4 {
  --col-span: 4;
}

.col-span-6 {
  --col-span: 6;
}

.col-span-8 {
  --col-span: 8;
}

.col-span-10 {
  --col-span: 10;
}

.col-span-12 {
  --col-span: 12;
}

.col-span-14 {
  --col-span: 14;
}

.col-span-16 {
  --col-span: 16;
}

.col-span-18 {
  --col-span: 18;
}

.col-span-20 {
  --col-span: 20;
}

.col-span-22 {
  --col-span: 22;
}

.col-span-24 {
  --col-span: 24;
}

/* Center utilities: center-span-1 ... center-span-24 */
.center-span-1 {
  grid-column: 12 / 13;
}

.center-span-2 {
  grid-column: 12 / 14;
}

.center-span-3 {
  grid-column: 11 / 14;
}

.center-span-4 {
  grid-column: 11 / 15;
}

.center-span-5 {
  grid-column: 10 / 15;
}

.center-span-6 {
  grid-column: 10 / 16;
}

.center-span-7 {
  grid-column: 9 / 16;
}

.center-span-8 {
  grid-column: 9 / 17;
}

.center-span-9 {
  grid-column: 8 / 17;
}

.center-span-10 {
  grid-column: 8 / 18;
}

.center-span-11 {
  grid-column: 7 / 18;
}

.center-span-12 {
  grid-column: 7 / 19;
}

.center-span-13 {
  grid-column: 6 / 19;
}

.center-span-14 {
  grid-column: 6 / 20;
}

.center-span-15 {
  grid-column: 5 / 20;
}

.center-span-16 {
  grid-column: 5 / 21;
}

.center-span-17 {
  grid-column: 4 / 21;
}

.center-span-18 {
  grid-column: 4 / 22;
}

.center-span-19 {
  grid-column: 3 / 22;
}

.center-span-20 {
  grid-column: 3 / 23;
}

.center-span-21 {
  grid-column: 2 / 23;
}

.center-span-22 {
  grid-column: 2 / 24;
}

.center-span-23 {
  grid-column: 1 / 24;
}

.center-span-24 {
  grid-column: 1 / 25;
}

/* Alignment utilities (container) */
.flex {
  display: flex;
}

.justify-left {
  justify-content: start;
}

.justify-center {
  justify-content: center;
}

.justify-right {
  justify-content: end;
}

.items-top {
  align-items: start;
}

.items-center {
  align-items: center;
}

.items-bottom {
  align-items: end;
}

/* Common combinations */
.place-center {
  justify-content: center;
  align-items: center;
}

.place-top-left {
  justify-content: start;
  align-items: start;
}

.place-top-center {
  justify-content: center;
  align-items: start;
}

.place-top-right {
  justify-content: end;
  align-items: start;
}

.place-bottom-left {
  justify-content: start;
  align-items: end;
}

.place-bottom-center {
  justify-content: center;
  align-items: end;
}

.place-bottom-right {
  justify-content: end;
  align-items: end;
}

@media screen and (max-width: 75em) { /* 1200px */
  .article-teaser.col-span-6 {
    --col-span: 12;
  }
}

@media screen and (max-width: 50em) { /* 800px */

  :root {
    --layout-margin-x: 1rem;
    --layout-padding-x: 1rem;
    --grid-columns: 6;
  }

  .article-teaser.col-span-6 {
    --col-span: 6;
  }

  .margin-125-0 {
    margin: 10rem 0;
  }

  .margin-125-0-0-0 {
    margin: 10rem 0 0 0;
  }

  .margin-0-0-125-0 {
    margin: 0 0 10rem 0;
  }

  .margin-150-0 {
    margin: 10rem 0;
  }

  .margin-200-0 {
    margin: 10rem 0;
  }

  .grid-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid-14 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid-auto-flow-dense {
    grid-auto-flow: initial;
  }

  .gap-125-0 {
    gap: 10rem 0;
  }

  .col {
    grid-column: var(--col-start, auto) / span var(--col-span, 6);
  }

  .col-14 {
    grid-column: var(--col-start, auto) / span var(--col-span, 6);
  }

  .col-full {
    grid-column: 1 / 7;
  }

  /* Start utilities: col-start-1 ... col-start-24 */
  .col-start-1 {
    --col-start: 1;
  }

  .col-start-2 {
    --col-start: 1;
  }

  .col-start-3 {
    --col-start: 1;
  }

  .col-start-4 {
    --col-start: 1;
  }

  .col-start-5 {
    --col-start: 1;
  }

  .col-start-6 {
    --col-start: 1;
  }

  .col-start-7 {
    --col-start: 1;
  }

  .col-start-8 {
    --col-start: 1;
  }

  .col-start-9 {
    --col-start: 1;
  }

  .col-start-10 {
    --col-start: 1;
  }

  .col-start-11 {
    --col-start: 1;
  }

  .col-start-12 {
    --col-start: 1;
  }

  .col-start-13 {
    --col-start: 1;
  }

  .col-start-14 {
    --col-start: 1;
  }

  .col-start-15 {
    --col-start: 1;
  }

  .col-start-16 {
    --col-start: 1;
  }

  .col-start-17 {
    --col-start: 1;
  }

  .col-start-18 {
    --col-start: 1;
  }

  .col-start-19 {
    --col-start: 1;
  }

  .col-start-20 {
    --col-start: 1;
  }

  .col-start-21 {
    --col-start: 1;
  }

  .col-start-22 {
    --col-start: 1;
  }

  .col-start-23 {
    --col-start: 1;
  }

  .col-start-24 {
    --col-start: 1;
  }

  /* Mobile col-span utilities for 6-column grid */
  .col-span-2 {
    --col-span: 2;
  }

  .col-span-4 {
    --col-span: 4;
  }

  .col-span-6,
  .col-span-8,
  .col-span-10,
  .col-span-12,
  .col-span-14,
  .col-span-16,
  .col-span-18,
  .col-span-20,
  .col-span-22,
  .col-span-24 {
    --col-span: 6;
  }

  /* Mobile center-span utilities for 6-column grid */
  .center-span-1 {
    grid-column: 3 / 4;
  }

  .center-span-2 {
    grid-column: 3 / 5;
  }

  .center-span-3 {
    grid-column: 2 / 5;
  }

  .center-span-4 {
    grid-column: 2 / 6;
  }

  .center-span-5 {
    grid-column: 1 / 6;
  }

  .center-span-6 {
    grid-column: 1 / 7;
  }

  .center-span-7,
  .center-span-8,
  .center-span-9,
  .center-span-10,
  .center-span-11,
  .center-span-12,
  .center-span-13,
  .center-span-14,
  .center-span-15,
  .center-span-16,
  .center-span-17,
  .center-span-18,
  .center-span-19,
  .center-span-20,
  .center-span-21,
  .center-span-22,
  .center-span-23,
  .center-span-24 {
    grid-column: 1 / 7;
  }

}