/* Mobile overflow containment.
 *
 * The page body must never scroll horizontally. These rules constrain the
 * specific things found overflowing at 390px: unbounded media, fixed
 * desktop-width containers, wide data tables, and video embeds.
 *
 * Scoped to small viewports so desktop layout is untouched.
 */

@media (max-width: 768px) {
  /* Media must never exceed its container.
   * min-width is forced to 0 because a min-width larger than the viewport
   * always wins over max-width, and several templates pin images to a
   * desktop pixel width via all three properties at once. */
  img,
  picture,
  picture img,
  video,
  svg {
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto;
  }

  /* Headings pinned to a desktop pixel width, and long unbreakable words
   * (e.g. "(Stereolithography)") that push past the text box */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    max-width: 100% !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Carousels clip their own track */
  .swiper,
  .swiper-container {
    overflow: hidden !important;
  }

  picture,
  figure {
    max-width: 100%;
  }

  figure {
    margin-left: 0;
    margin-right: 0;
  }

  /* Video embeds ship with a hard-coded pixel width */
  iframe {
    max-width: 100%;
  }

  /* Wide data tables scroll inside themselves rather than pushing the page */
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Containers pinned to a desktop pixel width. The page's own rule uses a
   * two-id selector, so this needs !important rather than a longer chain. */
  #how-it-works-card-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}