.container { width: min(100% - (var(--page-padding-desktop) * 2), var(--container-max)); margin-inline: auto; }
.section { position: relative; padding-block: var(--space-section); }
.section[id], section[id] { scroll-margin-top: calc(var(--header-height) + var(--space-6)); }
.section-muted { background: var(--color-surface-muted); }
.section-dark { background: var(--color-dark); color: var(--color-white); }
.section-dark p { color: rgba(255, 255, 255, 0.74); }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); }
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: center; }
.split > div { grid-column: span 5; }
.split-media { grid-column: 7 / -1; margin: 0; overflow: hidden; aspect-ratio: 5 / 4; box-shadow: var(--shadow-subtle); }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.section-dark .split-media { grid-column: 1 / span 6; box-shadow: none; }
.section-dark .split > div { grid-column: 8 / -1; }

@media (max-width: 1119px) {
  .container { width: min(100% - (var(--page-padding-tablet) * 2), var(--container-max)); }
  .split > div, .section-dark .split > div, .split-media, .section-dark .split-media { grid-column: span 6; }
}

@media (max-width: 767px) {
  .container { width: min(100% - (var(--page-padding-mobile) * 2), var(--container-max)); }
  .section { padding-block: var(--space-section); }
  .grid-12, .split { grid-template-columns: 1fr; gap: var(--space-8); }
  .split > div, .split-media, .section-dark .split > div, .section-dark .split-media { grid-column: auto; }
  .split-media, .section-dark .split-media { aspect-ratio: 4 / 3; }
}