@media (min-width: 768px) {
  :root {
    --container-padding: clamp(2rem, 5vw, 3rem);
  }

  #hero {
    padding: var(--space-2xl) var(--container-padding);
  }

  .hero-tagline::after {
    width: 80px;
  }
}

@media (min-width: 1024px) {
  #hero {
    padding: var(--space-xl) var(--container-padding);
  }

  .info-card {
    padding: var(--space-xl);
  }

  .pillar-icon {
    width: 100px;
    height: 100px;
  }
}

@media (min-width: 1440px) {
  .pillars-grid {
    gap: var(--space-2xl);
  }

  .gallery-grid {
    gap: var(--space-xl);
  }
}

@media (max-width: 374px) {
  .info-card {
    padding: var(--space-md);
  }

  .pillar-icon {
    width: 60px;
    height: 60px;
  }
}

@media (max-height: 600px) and (orientation: landscape) {
  #hero {
    min-height: auto;
    padding: var(--space-lg) var(--container-padding);
  }

  .scroll-indicator {
    display: none;
  }

  .hero-logo {
    max-width: 300px;
  }
}

@media print {
  .scroll-indicator {
    display: none;
  }

  .info-card,
  .pillar,
  .gallery-item {
    break-inside: avoid;
  }
}