Contents

@media screen and ( min-width: 768px )

  .product__hero
    animation: slide-hero 1.2s
    animation-delay: .6s
    animation-fill-mode: forwards
    //object-fit: cover
    //overflow: hidden


    img
      display: block
      //height: 100vh
      //height: calc(var(--vh, 1vh) * 100)
      //z-index: 2
      object-fit: cover


  @keyframes slide-hero

    0%
      transform: translateX(0)

    100%
      transform: translateY(35vh)

  .product__strap
    text-align: center
    animation: slide-strap 1s
    animation-delay: 1s
    animation-fill-mode: forwards
    color: $env-primary
    overflow: hidden
    font-size: $lg-font-size
    //overflow-y: visible

  @keyframes slide-strap

    0%
      transform: scale(0) translateY(25vh)

    100%
      transform: scale(1) translateY(25vh)


  .product__info
    //height: 100vh
    background-color: $pure-white
    text-align: center
    margin-top: 35vh

    p
      width: 80vw
      max-width: 800px
      margin: auto

  .product__title
    padding: 10rem 0 5rem 0

  .product__wrap
    display: flex
    flex-direction: row
    width: 100%
    background-color: $pure-white
    padding: 20vh 0 0
    margin: auto
    justify-content: center
    overflow: hidden

  .product__image,
  .product__description
    display: flex
    align-content: center
    align-self: center
    justify-content: center
    width: 40vw
    max-width: 600px
    overflow: hidden

  .product__start
    color: $env-primary
    font-weight: $heavy-font

  .product--image
    display: block
    width: 100%
    max-width: 300px
    object-fit: cover

  .txt-right
    text-align: right

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
slow-steps-0.4.6	_sass/product.sass
slow-steps-0.4.5	_sass/product.sass