@layer components {
  [data-hero] {
    padding-block-start: clamp(1.75rem, 1rem + 3.2vi, 4.5rem);
  }

  [data-hero] .halo {
    max-inline-size: 33rem;
    margin-inline: auto;
  }

  @container shell (min-width: 42rem) and (max-width: 70rem) {
    .footer-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: var(--space-l);
    }
  }
}