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

:root {
  --library-fit-scale: 0.9;
}

@media (max-width: 820px) {
  html,
  body {
    overflow-x: hidden;
  }

  body.library-mobile-fix {
    width: 100vw;
    max-width: 100vw;
    overflow-x: clip;
    position: relative;
  }

  body.library-mobile-fix #root {
    width: 100vw;
    max-width: 100vw;
    overflow-x: clip;
  }

  body.library-mobile-fix:not(.library-mobile-fix--geo):not(.library-mobile-fix--cards) #root,
  body.library-mobile-fix--cards .wrap {
    zoom: var(--library-fit-scale);
    width: calc(100% / var(--library-fit-scale));
    margin: 0 auto;
  }

  body.library-mobile-fix--grade10 #root {
    zoom: 0.76;
    width: calc(100% / 0.76);
    margin: 0 auto;
  }

  body.library-mobile-fix .max-w-6xl,
  body.library-mobile-fix .max-w-4xl,
  body.library-mobile-fix .max-w-3xl {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.library-mobile-fix .max-w-6xl.mx-auto.p-4,
  body.library-mobile-fix .max-w-4xl.mx-auto.p-4,
  body.library-mobile-fix .max-w-3xl.mx-auto.p-4 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.library-mobile-fix .fixed.bottom-6.right-6,
  body.library-mobile-fix .fixed.top-4.right-4.z-50 {
    right: 12px !important;
  }

  body.library-mobile-fix--geo {
    width: 100vw;
    max-width: 100vw;
    overflow-x: clip;
    zoom: 0.92;
  }

  body.library-mobile-fix--geo .grid,
  body.library-mobile-fix--geo .modal,
  body.library-mobile-fix--geo .modal-body,
  body.library-mobile-fix--geo .unit-header,
  body.library-mobile-fix--geo .progress-bar-wrap {
    max-width: 100%;
  }

  body.library-mobile-fix--cards {
    width: 100vw;
    max-width: 100vw;
    overflow-x: clip;
  }

  body.library-mobile-fix--cards .wrap {
    max-width: 100%;
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
  }
}

@media (max-width: 680px) {
  :root {
    --library-fit-scale: 0.86;
  }

  body.library-mobile-fix--grade10 #root {
    zoom: 0.7;
    width: calc(100% / 0.7);
  }

  body.library-mobile-fix--geo {
    zoom: 0.88;
  }
}