@import ../../../styles/helpers

.hero
    position: relative
    z-index: 300
    display: flex
    flex-wrap: wrap
    align-content: flex-start
    justify-content: center
    min-height: 754px
    margin: 0 0 -235px 0
    padding: 0
    // +fhd
    //     min-height: 784px
    +w
        min-height: 754px
    +x
        min-height: 754px
    +d
        min-height: 620px
    +t
        min-height: 596px
    +m
        align-content: flex-start
        min-height: 1072px
    +a
        min-height: 960px
    +s
        min-height: 900px

.background
    //width * vh = 1.7785
    //height * vw = .5623
    overflow: hidden
    position: fixed
    top: 0
    // top: -12em
    left: 50%
    //The numbers:
    min-width: 122.64vw
    width: calc(101.61vh * 1.7785)
    min-height: 101.61vh
    height: calc(122.64vw * .5623)
    transform: translate(-50%, 0%)
    opacity: 0.09
    background-image: url(../../../images/backdrop/header.jpg)
    background-repeat: no-repeat
    background-size: contain
    background-position: center
    z-index: 300

// .video
//     position: relative
//     bottom: -1%
//     width: 100%
//     height: 100%
//     +m
//         display: none

.leftfade
    position: absolute
    bottom: 0
    left: -27px
    width: calc(100% + 32px)
    height: 200%
    background: linear-gradient(to right, #000000E3, transparent 100%)
    z-index: 305
    &::after
        content: ''
        display: block
        width: 100%
        height: 100%
        background-color: $neutrals1
        opacity: 0.46
    +m
        display: none

.navfade
    z-index: 310
    +m
        display: none

.container
    position: relative
    z-index: 315
    display: flex
    padding: 113px calc(80px + 136px)
    top: 0px
    // +fhd
    //     top: -162px
    // +w
    //     top: 0px
    // +x
    //     top: 0px
    +d
        padding: 113px calc(40px + 136px)
    +t
        padding: 96px calc(40px + 64px)
    +m
        flex-direction: column
        align-items: center
        text-align: center
        padding: 96px 64px 0
    +a
        padding: 96px 40px
    ~ *
        z-index: 320

.poster
    position: relative
    display: inline-block
    flex-shrink: 0
    vertical-align: top
    // width: calc(25% - calc(calc(27px * 3) / 4))
    width: 229px
    height: calc(229px * 1.414)
    margin: 0 44px 0 0
    padding: 0
    +m
        width: 48vw
        height: calc(48vw * 1.414)
        margin: 0 0 8vw
    +s
        width: 55vw
        height: calc(55vw * 1.414)

.wrap
    position: relative
    z-index: 3
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 368px
    +t
        max-width: 340px
    +m
        max-width: 100%
        margin-bottom: 18px

.title
    font-size: 40px
    margin-bottom: 12px
    +t
        font-size: 32px
    +s
        font-size: 26px

.text
    margin-bottom: 18px
    color: $neutrals4
    +s
        font-size: 14px

.label
    +label
    margin-right: auto
    background-color: $green
    +m
        margin: 0 auto