/* ---------- Global Mobile Fixes ---------- */

html,
body {
  width: 100%;
  overflow-x: hidden;
}

/* ---------- Responsive Images ---------- */

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

/* ---------- Mobile Layout ---------- */

@media (max-width: 768px) {

  body {
    overflow-x: hidden !important;
  }

  /* Sections / Containers */

  section,
  .section,
  .container,
  .hero,
  .grid,
  .cards {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Headlines */

  h1 {
    font-size: clamp(42px, 11vw, 72px) !important;
    line-height: 0.95 !important;
  }

  h2 {
    font-size: clamp(30px, 8vw, 52px) !important;
    line-height: 1 !important;
  }

  h3 {
    font-size: clamp(22px, 6vw, 34px) !important;
  }

  /* Paragraphs */

  p {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  /* Buttons */

  button,
  .button,
  a.button {
    width: 100%;
    max-width: 100%;
  }

  /* Flex layouts */

  [style*="display:flex"],
  .flex,
  .row {
    flex-direction: column !important;
  }

  /* Grid layouts */

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