@layer page {
  @media (max-width: 1080px) {
    .hero__grid,
    .statement-grid,
    .difference-grid,
    .contact-grid,
    .operating-grid,
    .form-grid {
      grid-template-columns: 1fr;
    }

    .hero h1,
    .section-heading h2,
    .difference-panel h2,
    .contact-panel h2 {
      max-width: 26ch;
    }
  }

  @media (max-width: 640px) {
    .hero h1 {
      font-size: clamp(1.82rem, 9vw, 2.75rem);
    }

    #apresentacao .section-heading h2 {
      font-size: clamp(1.9rem, 9vw, 2.25rem);
    }

    .hero__actions,
    .form-actions {
      align-items: stretch;
    }

    .track-row,
    .deep-panel dl div {
      grid-template-columns: 1fr;
    }

    .difference-grid {
      gap: 1rem;
    }

    .difference-item {
      grid-template-columns: 3.6rem 1fr;
      gap: 1rem;
      padding-block: 1.25rem;
    }

    .difference-item__icon {
      width: 3.6rem;
      padding: 0.95rem;
    }

    .deep-panel h3 {
      margin-block-start: 2.5rem;
    }

    .deep-panel dl {
      margin-block-start: 2.5rem;
    }

    .deep-panel dl div {
      gap: 0.75rem;
      min-height: auto;
      padding-block: 1.35rem;
    }

    .info-card,
    .process-card,
    .difference-panel,
    .deep-panel,
    .contact-form,
    .hero-panel {
      padding: 1.15rem;
    }

    .contact-grid {
      gap: 2.2rem;
    }

    .contact-panel h2 {
      font-size: clamp(2.05rem, 9vw, 2.55rem);
    }

    .contact-point {
      grid-template-columns: 3.45rem 1fr;
      gap: 1rem;
      padding-block: 1.1rem;
    }

    .contact-point__icon {
      width: 3.35rem;
      padding: 0.8rem;
    }

    .form-grid {
      gap: 1.25rem;
    }

    .form-actions .button {
      width: 100%;
    }

    #apresentacao .note-stack {
      grid-template-rows: auto;
      padding-block-start: 0;
    }

    #apresentacao .info-card {
      grid-template-columns: 3.5rem 1fr;
    }

    .info-card__icon {
      width: 3.5rem;
    }
  }
}