@import ~mweb/common/components/safeAreaMixins

.upsell-page
  background: #fff
  display: flex
  height: 100vh
  width: 100vw
  flex-direction: column
  justify-content: space-around
  align-items: center
  @include safe-area-horizontal-padding-to-remove-insets

  .twitch-logo
    height: 58px
    width: 100%

.upsell__default-image
  width: 100%

  // this allows phone layout on that 812px iPhone X
  @media (min-width: 813px) and (orientation: landscape)
    height: 80vh
    width: auto

.upsell__header
  color: #706A7C
  line-height: 24px

.upsell__pitch
  font-size: 18px

.upsell__header, .upsell__image, .upsell__footer
  text-align: center

.upsell__footer
  width: 90%

  @media (min-width: 540px) and (orientation: portrait)
    width: 50vw

@media screen and (orientation: landscape)
  .upsell-page
    flex-flow: column wrap
    justify-content: space-around

  .upsell__image
    order: 3

  .upsell__header, .upsell__image, .upsell__footer
    margin: initial
    width: 45%

  .upsell__header
    order: 1

  .upsell__footer
    order: 2
