/* ============================= */
/* MOBILE UI GLOBAL FIX FILE     */
/* Only affects screens < 768px  */
/* ============================= */

@media (max-width: 768px) {

  /* ---------- GLOBAL SPACING ---------- */

  section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .mt-32 { margin-top: 3rem !important; }
  .mt-40 { margin-top: 3rem !important; }
  .mt-18 { margin-top: 2rem !important; }

  /* ---------- NAVBAR ---------- */

  nav {
    padding-left: 16px !important;
    padding-right: 16px !important;
    height: auto !important;
  }

  /* ---------- HERO BUTTON FIX ---------- */

  .flex.items-center.gap-4.mt-8 {
    flex-direction: column !important;
    width: 100%;
  }

  .flex.items-center.gap-4.mt-8 a {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ---------- FIX FIXED HEIGHT CARDS ---------- */

  .h-\[400px\] {
    height: auto !important;
  }

  /* ---------- GRID FIX ---------- */

  .grid {
    grid-template-columns: 1fr !important;
  }

  /* ---------- NEWSLETTER FIX ---------- */

  .newsletter-form {
    flex-direction: column !important;
    height: auto !important;
    gap: 12px !important;
    padding: 16px !important;
  }

  .newsletter-form input,
  .newsletter-form button {
    width: 100% !important;
  }

  /* ---------- FOOTER FIX ---------- */

  footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ---------- IMAGE FIX ---------- */

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ---------- BUTTON TEXT WRAP FIX ---------- */

  a, button {
    white-space: normal !important;
  }

}