.phone
  @media (min-width: tablet-lower-limit)
    max-width 338px
    max-height 690px

  width 23.26vw
  height 47.5vw
  position relative

  @media (max-width: mobile-upper-limit)
    width 23.26vw * 2
    height 47.5vw * 2

  &__container
    width 100%
    height 100%
    background-image url("/static/images/iphone/iphone.png")
    background-size contain // transform: translateZ(-4px) scale(3);
    background-repeat no-repeat
    position relative

  &:before
    content ""
    width 86%
    height 75.78%
    background-color black
    margin auto
    position absolute
    top 0
    bottom 0
    left 0
    right 0

  &__black-window
    width 86%
    height 75.78%
    overflow hidden
    background-color black
    margin auto
    position relative
    position absolute
    top 0
    bottom 0
    left 0
    right 0

    .phone__image
      width 100%

  &__image
    width 86%
    margin-left auto
    margin-right auto
    position absolute
    top 5.8vw
    left 0
    right 0
    z-index 2

    @media (max-width: mobile-upper-limit)
      top 10vw

.phone__image-hide
  opacity 0
  transition-timing-function ease-in-out
  transition-duration .2s
  transition-property opacity

.phone__image--is-active
  opacity 1