html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}

@media (max-width: 760px) {
  body .site-shell .site-header,
  body .site-shell .site-header.is-scrolled,
  body .showcase .site-header,
  body .showcase .site-header.is-scrolled {
    padding-left: max(15px, env(safe-area-inset-left));
    padding-right: max(15px, env(safe-area-inset-right));
  }
}

@media (max-width: 319px) {
  :root {
    --mobile-gutter: 12px;
  }

  body {
    min-width: 0;
    overflow-x: clip;
  }

  body .site-shell .site-header,
  body .site-shell .site-header.is-scrolled,
  body .showcase .site-header,
  body .showcase .site-header.is-scrolled {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}