/* Phone adjustments for the Stryda site */
html { -webkit-text-size-adjust: 100%; }
@media (hover: none) { .card .qa { opacity: 1 !important; transform: none !important; } }
[role="dialog"] { max-height: 100vh; overflow-y: auto; }
@media (max-width: 820px) {
  header > div:first-child { grid-template-columns: 1fr auto !important; padding: 8px 12px !important; row-gap: 0 !important; }
  header > div:first-child > a[aria-label="Stryda home"] { justify-self: start !important; grid-row: 1; grid-column: 1; }
  header > div:first-child > div:last-child { grid-row: 1; grid-column: 2; }
  header nav[aria-label="Main"] { grid-row: 2; grid-column: 1 / -1; flex-wrap: nowrap !important; overflow-x: auto; gap: 22px !important; white-space: nowrap; scrollbar-width: none; }
  header label + div { display: none !important; }
  [aria-label="Campaign film"] { height: 620px !important; margin: 0 10px !important; }
  [aria-label="Campaign film"] div[style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; }
  [aria-label="Campaign film"] > div[style*="left: 48px"] { left: 20px !important; right: 20px !important; bottom: 24px !important; }
  [aria-label="Campaign film"] > div[style*="right: 28px"] { bottom: auto !important; top: 16px !important; right: 16px !important; }
  [aria-label="Campaign film"] > span { display: none !important; }
  div[style*="translateX(calc"] { transform: none !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .card[style*="calc(20% - 3.2px)"] { flex: 0 0 72% !important; scroll-snap-align: start; }
  div[style*="grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  div[style*="height: 620px; border-radius: 24px"] { height: 420px !important; }
  .float { zoom: 0.6; }
  section[style*="padding: 72px 56px"], div[style*="padding: 72px 56px"] { padding: 40px 20px !important; }
  div[style*="padding: 48px 56px"], div[style*="padding: 56px 48px"], div[style*="padding: 48px;"] { padding: 32px 20px !important; }
  section, footer { overflow-x: hidden; }
  div[style*="max-width: 1440px; margin: 0 auto; padding: 112px 40px"], section[style*="padding: 112px 40px"], section[style*="padding: 120px 40px"] { padding-left: 16px !important; padding-right: 16px !important; }
  [role="dialog"] img[style*="height: 560px"] { height: 260px !important; }
}