.layout-grid {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [breakout-start] minmax(0, calc((var(--container-xl) - var(--container-content)) / 2))
    [content-start] min(100% - var(--gutter) * 2, var(--container-content)) [content-end]
    minmax(0, calc((var(--container-xl) - var(--container-content)) / 2)) [breakout-end]
    minmax(var(--gutter), 1fr) [full-end];
}
.layout-grid > * { grid-column: content; }
.layout-grid > .breakout { grid-column: breakout; }
.layout-grid > .full-bleed { grid-column: full; }

.layout-grid > *,
.split-5-7 > *,
.split-4-8 > *,
.overlap > *,
.sticky-pair > *,
.auto-grid > * { min-width: 0; }

.split-5-7 {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}
.split-4-8 {
  display: grid;
  gap: var(--space-l);
  align-items: start;
}
@media (min-width: 48em) {
  .split-5-7 { grid-template-columns: 5fr 7fr; }
  .split-4-8 { grid-template-columns: 4fr 8fr; }
  .split-offset > :last-child { margin-block-start: var(--space-2xl); }
}

.overlap {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
}
.overlap > .overlap-media {
  grid-column: 1 / 9;
  grid-row: 1;
}
.overlap > .overlap-card {
  grid-column: 7 / 13;
  grid-row: 1;
  z-index: var(--z-raised);
  background: var(--color-bg-1);
  padding: var(--space-l);
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 47.99em) {
  .overlap > .overlap-media { grid-column: 1 / 13; }
  .overlap > .overlap-card {
    grid-column: 2 / 12;
    grid-row: auto;
    margin-block-start: calc(var(--space-xl) * -1);
  }
}

.editorial-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-s) var(--space-m);
}
.editorial-12 > .col-main { grid-column: 2 / 9; }
.editorial-12 > .col-aside { grid-column: 9 / 12; }
.editorial-12 > .col-wide { grid-column: 1 / 13; }
.editorial-12 > .col-pull { grid-column: 1 / 5; }   
@supports (grid-template-columns: subgrid) {
  .editorial-12 > .col-sub {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / 13;
  }
}
@media (max-width: 47.99em) {
  .editorial-12 > * { grid-column: 1 / 13 !important; }
}

.stage-full { min-height: 100svh; display: grid; place-items: center; }
.stage-tall { min-height: 85svh; display: grid; align-content: center; }
.stage-half { min-height: 55svh; display: grid; align-content: center; }

.sticky-pair {
  display: grid;
  gap: var(--space-l);
}
@media (min-width: 64em) {
  .sticky-pair { grid-template-columns: 1fr 1fr; align-items: start; }
  .sticky-pair > .sticky-side {
    position: sticky;
    top: calc(var(--space-l) + var(--header-height, 4rem));
  }
}

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--card-min, 18rem), 100%), 1fr));
  gap: var(--space-m);
}

.masonry {
  columns: var(--masonry-cols, 3) 18rem;
  column-gap: var(--space-m);
}
.masonry > * { break-inside: avoid; margin-block-end: var(--space-m); }

.section { padding-block: var(--section-space); }
.section-tight { padding-block: calc(var(--section-space) * 0.6); }

.divider {
  border: none;
  height: 1px;
  background: linear-gradient(to right,
    transparent, var(--color-border-2) 15%, var(--color-border-2) 85%, transparent);
}

.section-slant {
  clip-path: polygon(0 0, 100% 2.5rem, 100% 100%, 0 calc(100% - 2.5rem));
  padding-block: calc(var(--section-space) + 2.5rem);
}

.bg-dots {
  background-image: radial-gradient(
    color-mix(in oklab, var(--color-text-3) 25%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
}

.bg-grid {
  background-image:
    linear-gradient(color-mix(in oklab, var(--color-border-1) 60%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--color-border-1) 60%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
}

.bg-glow {
  background-image: radial-gradient(
    ellipse 60% 45% at 50% 0%,
    color-mix(in oklab, var(--color-primary) 9%, transparent), transparent);
}

.bg-grain { position: relative; isolation: isolate; }
.bg-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}