/* MAPPIN MOBILE READER REVIEW V37
   Phone layout only:
   - slide gets maximum width
   - arrows are compact and centred below
   - Why Mappin and Product Guide match
   - desktop stays unchanged
*/

@media (max-width: 899px) {

  /* WHY MAPPIN */
  .v5-reader[data-reader="why"] .v5-reader-stage {
    display: grid !important;
    grid-template-columns: 1fr 34px 34px 1fr !important;
    grid-template-rows: auto 34px !important;
    column-gap: 8px !important;
    row-gap: 6px !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 8px !important;
    overflow: visible !important;
  }

  .v5-reader[data-reader="why"] .v5-slide-stack {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  .v5-reader[data-reader="why"] .why-illustrated-page {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
  }

  .v5-reader[data-reader="why"] .v5-reader-stage > .v5-arrow {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    translate: none !important;
    margin: 0 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 9px !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    z-index: 2 !important;
  }

  .v5-reader[data-reader="why"] .v5-reader-stage > .v5-arrow.prev {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  .v5-reader[data-reader="why"] .v5-reader-stage > .v5-arrow.next {
    grid-column: 3 !important;
    grid-row: 2 !important;
  }

  /* PRODUCT GUIDE */
  #product-guide .pg30-stage {
    display: grid !important;
    grid-template-columns: 1fr 34px 34px 1fr !important;
    grid-template-rows: auto 34px !important;
    column-gap: 8px !important;
    row-gap: 6px !important;
    align-items: center !important;
    justify-content: stretch !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 8px !important;
    overflow: visible !important;
  }

  #product-guide .pg30-frame {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #product-guide .pg30-page {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
  }

  #product-guide .pg30-arrow {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    translate: none !important;
    margin: 0 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 9px !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    z-index: 2 !important;
  }

  #product-guide .pg30-prev {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  #product-guide .pg30-next {
    grid-column: 3 !important;
    grid-row: 2 !important;
  }
}

@media (max-width: 540px) {
  .v5-reader[data-reader="why"] .v5-reader-stage,
  #product-guide .pg30-stage {
    grid-template-columns: 1fr 30px 30px 1fr !important;
    grid-template-rows: auto 30px !important;
    column-gap: 7px !important;
    row-gap: 5px !important;
    padding: 6px !important;
  }

  .v5-reader[data-reader="why"] .v5-reader-stage > .v5-arrow,
  #product-guide .pg30-arrow {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 8px !important;
    font-size: 1.1rem !important;
  }
}