.container {
  width: min(var(--container-width), calc(100% - 2.5rem));
  margin: 0 auto;
}

.section {
  padding: clamp(var(--space-12), 8vw, var(--space-20)) 0;
}

.hero-grid {
  display: grid;
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  align-items: center;
}

.section-heading {
  max-width: 48rem;
  margin-bottom: var(--space-10);
}

.card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.footer-inner {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}

.footer-navigation {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 42rem) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 54rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.9fr);
  }

  .footer-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 68rem) {
  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .service-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .footer-inner {
    grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: no-preference) {
  a,
  button,
  input,
  select,
  textarea {
  transition: background-color var(--transition-speed) ease,
    border-color var(--transition-speed) ease,
    color var(--transition-speed) ease,
      box-shadow var(--transition-speed) ease,
      transform var(--transition-speed) ease;
  }
}