/* TATUM responsive fixes auto */
* { box-sizing: border-box; }

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

img, video, canvas, iframe {
  max-width: 100%;
}

img, video, canvas {
  height: auto;
}

iframe {
  display: block;
}

table {
  width: 100%;
  overflow-x: auto;
  display: block;
}

input, select, textarea, button {
  max-width: 100%;
  font-size: 16px;
}

@media (max-width: 768px) {
  body {
    width: 100%;
  }

  section, .section, .container, .wrapper, .content {
    max-width: 100% !important;
    width: 100% !important;
  }

  h1 {
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.08 !important;
  }

  h2 {
    font-size: clamp(22px, 6vw, 32px) !important;
    line-height: 1.15 !important;
  }

  p, li {
    font-size: 16px;
    line-height: 1.55;
  }

  .grid, .cards, .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .modal, .popup, .checkout-modal {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    left: 12px !important;
    right: 12px !important;
  }

  button, .btn, .button {
    min-height: 44px;
    width: 100%;
  }
}