/* Breakpoints follow LAND-001: flexible small screens, tablet at 768px,
   desktop at 1024px, and distributed large-monitor layouts at 1440px. */
@media (min-width: 480px) {
  .section {
    padding-block: var(--space-8);
  }
}

@media (min-width: 768px) {
  .split-layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 0.6fr);
    align-items: center;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: clamp(2rem, 5vw, 5rem);
  }

  .foundation-status {
    min-height: 32rem;
  }
}

@media (min-width: 1440px) {
  .card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .split-layout {
    grid-template-columns: minmax(0, 2fr) minmax(20rem, 1fr);
  }
}