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

.section
    position: relative
    padding: 182px 0 162px
    overflow: hidden
    +t
        padding: 140px 0 80px
    +a
        padding: 128px 0 64px
    &:not(.bottom)
        padding-bottom: 0

.container
    position: relative
    +m
        text-align: center

.wrap
    position: relative
    z-index: 3
    max-width: 536px
    +t
        max-width: 340px
    +m
        max-width: 100%
        margin-bottom: 80px

.stage
    margin-bottom: 16px

.title
    max-width: 700px
    margin: 0 0 32px
    +t
        max-width: 550px
    +m
        margin: 0 auto 32px

.text
    max-width: 536px
    margin: 0 0 48px
    color: $neutrals4
    +m
        margin: 0 auto

.button
    width: 155px
    background: $purple
    transition: background .2s
    cursor: pointer
    &:hover
        background: darken($purple, 10)
    +m
        margin: 48px 0 0;

.buttonStroke
    width: 141px
    height: 52px
    border-radius: 99px
    cursor: pointer
    +m
        width: 100%
        margin: 48px 0 0;

.gallery
    position: absolute
    z-index: 1
    top: 50%
    // left: 231px
    right: 80px
    width: 1625px
    transform: translate(33.4%, -55%)
    pointer-events: none
    // +x
        // left: calc(50%)
        // transform: translate(-20%, -55%)
        // width: 908px
    +d
        width: 150vw
        transform: translate(40%, -55%)
    +t
        right: 40px
        width: 170vw
        transform: translate(33.4%, -55%)
    +m
        display: none
        position: relative
        top: -80px
        left: auto
        width: 140%
        // right: -16px
        margin: 0 auto
        transform: translate(-12%, 0)
        pointer-events: all

.image
    width: 100%
    height: auto