@layer base {
  @media (min-width: 1920px) {
    h1 {
      font-size: 4.5rem;
    }
    h2 {
      font-size: 2.25rem;
    }
    h3 {
      font-size: 1.125rem;
    }
    h4 {
      font-size: 1.125rem;
    }
    p {
      font-size: 1rem;
    }
  }
  @media (min-width: 768px) {
    p {
      font-size: 1rem;
    }
    h5 {
      font-size: 1.25rem;
    }
  }
}

@layer components {
  @media (max-width: 1023px) {
    .btn {
      font-size: 0.875rem;

      justify-content: center;
    }
  }
  @media (max-width: 767px) {
    .btn {
      width: 100%;
    }

    .hero-cta .btn-hero {
      font-size: 0.875rem; /* 14px */
      line-height: 1.5em;
      letter-spacing: -0.02em;
      white-space: nowrap; /* no-wrap */
      flex: 1; /* każdy przycisk bierze ~50% */
      justify-content: center;
      padding: 0.75rem clamp(0.75rem, 3vw, 2rem);
    }
    .hero-cta {
      gap: 0.5rem; /* „środkowy” odstęp responsywny */
    }
  }

  @media (max-width: 389px) {
    .hero-cta .btn-hero {
      font-size: 0.75rem;
    }
  }
}