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

.section
    position: relative
    display: flex
    align-items: center
    min-height: 800px
    padding: 80px 0
    border-top: 1px solid $neutrals6
    background: $white
    +d
        min-height: 700px
    +m
        min-height: auto
        padding: 64px 0
        text-align: center

    +dark
        background: $neutrals1
        border-color: $neutrals3

.wrap
    position: relative
    z-index: 3
    max-width: 480px
    +d
        max-width: 420px
    +m
        max-width: 100%
        margin-bottom: 40px

.stage
    margin-bottom: 12px
    +hairline-1
    color: $neutrals4

.title
    margin-bottom: 20px
    +m
        font-size: 48px

.text
    margin-bottom: 40px
    +body-2
    color: $neutrals4

.btns
    display: flex
    +m
        display: block

.button
    +m
        width: 100%
    &:not(:last-child)
        margin-right: 16px
        +m
            margin: 0 0 16px

.gallery
    position: absolute
    top: 50%
    right: calc(50% - 560px)
    width: 684px
    transform: translateY(-50%)
    pointer-events: none
    +x
        right: calc(50% - 520px)
        width: 570px
    +d
        right: calc(50% - 440px)
        width: 510px
    +m
        position: static
        transform: translateY(0)
        width: 100%
    +s
        width: auto
        margin: 0
        width: 100%

.heroWrapper
    position: relative
    width: 100%
    height: 470px
    max-width: 100%
    max-height: 100%
    margin: 0 auto

    +d 
        height: 380px
    +m 
        height: 250px

.preview
    z-index: 2
    img
        width: 100%
