.wrap {
  width: 100%;
  padding-left: var(--space-15);
  padding-right: var(--space-15);
}

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

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

@media (max-width: 1023px) {
  .grid-12 {
    grid-template-columns: repeat(6, 1fr);
    /* A .grid-12 só declarava column-gap. Abaixo deste ponto todos os
       .col-span-* passam a span 6 e todos os .col-start-* a 1, portanto a
       grelha é sempre uma coluna empilhada — e sem row-gap os blocos
       encostavam-se. Medido a 390px: 30 de 36 pares tinham 0px entre o título
       e o parágrafo seguinte, em cinco páginas diferentes. */
    row-gap: var(--space-6);
  }
}

.section {
  border-top: var(--line) solid var(--colors-blue);
  padding-top: var(--space-15);
  padding-bottom: var(--space-15);
  position: relative;
}

.section-tall {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.section-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-15);
}

/* Use grid-column-end (not the `grid-column` shorthand) so .col-span-N
   composes correctly with .col-start-M. The shorthand `grid-column: span N`
   sets grid-column-start to `span N` and end to auto — a one-track item.
   With grid-column-end alone, .col-start-M's longhand survives the cascade. */
.col-span-2 { grid-column-end: span 2; }
.col-span-3 { grid-column-end: span 3; }
.col-span-4 { grid-column-end: span 4; }
.col-span-5 { grid-column-end: span 5; }
.col-span-6 { grid-column-end: span 6; }
.col-span-7 { grid-column-end: span 7; }
.col-span-8 { grid-column-end: span 8; }
.col-span-9 { grid-column-end: span 9; }
.col-span-10 { grid-column-end: span 10; }
.col-span-12 { grid-column-end: span 12; }

.col-start-1 { grid-column-start: 1; }
.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }
.col-start-5 { grid-column-start: 5; }
.col-start-6 { grid-column-start: 6; }
.col-start-7 { grid-column-start: 7; }
.col-start-8 { grid-column-start: 8; }

@media (max-width: 1023px) {
  .col-span-2,
  .col-span-3,
  .col-span-4,
  .col-span-5,
  .col-span-6,
  .col-span-7,
  .col-span-8,
  .col-span-9,
  .col-span-10,
  .col-span-12 { grid-column-end: span 6; }
  .col-start-1,
  .col-start-2,
  .col-start-3,
  .col-start-4,
  .col-start-5,
  .col-start-6,
  .col-start-7,
  .col-start-8 { grid-column-start: 1; }
}

.stack-1 > * + * { margin-top: var(--space-1); }
.stack-2 > * + * { margin-top: var(--space-2); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-6 > * + * { margin-top: var(--space-6); }
.stack-8 > * + * { margin-top: var(--space-8); }
.stack-12 > * + * { margin-top: var(--space-12); }
.stack-15 > * + * { margin-top: var(--space-15); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.items-center { align-items: center; }
.justify-start { justify-content: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-15 { gap: var(--space-15); }

.aspect-square { aspect-ratio: 1 / 1; }
.aspect-4-5 { aspect-ratio: 4 / 5; }
.aspect-3-2 { aspect-ratio: 3 / 2; }
.aspect-16-9 { aspect-ratio: 16 / 9; }