html,
body {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  html {
    font-size: 100%;
  }

  .max-w-7xl,
  .max-w-4xl,
  .max-w-3xl,
  .max-w-2xl,
  .max-w-xl {
    max-width: 100%;
  }

  .min-h-screen {
    min-height: 100svh;
  }

  .text-6xl {
    font-size: clamp(2.4rem, 10vw, 3.6rem);
    line-height: 0.98;
  }

  .text-5xl {
    font-size: clamp(2.1rem, 8vw, 3rem);
    line-height: 1.02;
  }

  .text-4xl {
    font-size: clamp(1.9rem, 7vw, 2.5rem);
    line-height: 1.05;
  }

  .text-3xl {
    font-size: clamp(1.6rem, 5.5vw, 2rem);
    line-height: 1.1;
  }

  .text-2xl {
    font-size: clamp(1.35rem, 4.8vw, 1.75rem);
    line-height: 1.2;
  }

  .text-xl {
    font-size: 1.0625rem;
    line-height: 1.6;
  }

  .pt-32 {
    padding-top: 6rem;
  }

  .pt-28 {
    padding-top: 5.5rem;
  }

  .pb-20 {
    padding-bottom: 3.5rem;
  }

  .py-24 {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

  .py-20 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .py-16 {
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
  }

  .gap-16,
  .gap-12 {
    gap: 2rem;
  }

  .min-h-\[580px\] {
    min-height: 320px;
  }

  .h-80 {
    height: 16rem;
  }

  .px-8 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .p-8 {
    padding: 1.5rem;
  }

  .p-7 {
    padding: 1.25rem;
  }

  .text-right {
    text-align: left;
  }

  header + div nav .text-4xl {
    font-size: clamp(2rem, 9vw, 3rem);
  }
}