/* =====================================================
   PRZEPŁYW PREMIUM
   Poprawka wyłącznie dla nowych plansz Warstwa 1 i 2
   ===================================================== */

html,
body {
  overflow-x: hidden !important;
}

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

/*
  Nie ruszamy całej strony.
  Dopasowanie dotyczy tylko elementów nowych slajdów premium.
*/
@media (max-width: 900px) {
  [class*="story"],
  [class*="layer"],
  [class*="slide"] {
    box-sizing: border-box;
  }

  /*
    Telefony wewnątrz plansz nie mogą wychodzić poza ekran.
  */
  [class*="story"] [class*="phone"],
  [class*="layer"] [class*="phone"],
  [class*="slide"] [class*="phone"],
  [class*="story"] [class*="iphone"],
  [class*="layer"] [class*="iphone"],
  [class*="slide"] [class*="iphone"] {
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform-origin: top center !important;
  }

  /*
    Ekran telefonu ma przycinać własną zawartość,
    ale nie tekst znajdujący się nad telefonem.
  */
  [class*="phone-screen"],
  [class*="iphone-screen"],
  [class*="device-screen"] {
    overflow: hidden !important;
  }

  /*
    Teksty nowych slajdów pozostają nad telefonem
    i nie mogą się z nim nakładać.
  */
  [class*="story"] h1,
  [class*="story"] h2,
  [class*="story"] h3,
  [class*="layer"] h1,
  [class*="layer"] h2,
  [class*="layer"] h3,
  [class*="slide"] h1,
  [class*="slide"] h2,
  [class*="slide"] h3 {
    position: relative !important;
    z-index: 5 !important;
    max-width: calc(100vw - 40px) !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}

@media (max-width: 480px) {
  [class*="story"] [class*="phone"],
  [class*="layer"] [class*="phone"],
  [class*="slide"] [class*="phone"],
  [class*="story"] [class*="iphone"],
  [class*="layer"] [class*="iphone"],
  [class*="slide"] [class*="iphone"] {
    max-width: calc(100vw - 22px) !important;
  }
}