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

.section
    position: relative
    text-align: right
    padding: 188px 0
    // display: flex
    // justify-items: flex-end
    +m
        text-align: left
        padding-top: 0
        padding-bottom: 0
        margin-top: -0.5em
        margin-bottom: 8.1em //until button re-added?

.container
    position: relative

.wrap
    position: relative
    z-index: 2
    margin-left: auto
    max-width: 500px
    +t
        max-width: 340px
    +m
        max-width: 100%
        margin-bottom: 0px

.stage
    color: $green

.title
    margin-bottom: 20px

.text
    margin-bottom: 40px
    color: $neutrals4
    .feature
        font-weight: 500
        color: $neutrals5

.btns
    display: flex
    justify-content: flex-end
    +m
        display: block

.button
    width: 148px
    background: $green
    box-shadow: 0 0 0 2px $green inset
    color: $neutrals8
    &:hover
        background: darken($green, 10)
        box-shadow: 0 0 0 2px darken($green, 10) inset
        color: $neutrals8
    +m
        width: 100%
    &:not(:last-child)
        margin-right: 16px
        +m
            margin: 0 0 16px
    
.scroll
    position: absolute
    bottom: 96px
    +d
        bottom: 48px
    +m
        bottom: 64px

.gallery
    position: absolute
    z-index: 1
    top: 50%
    left: -324px
    width: 1381px
    transform: translateY(-45%)
    pointer-events: none
    +x
        left: calc(50% - 840px)
        width: 1200px
    +d
        left: calc(50% - 736px)
        width: 956px
    +t
        left: calc(50% - 632px)
    +m
        display: none

.m_gallery
    display: none
    +m
        display: block
        position: relative
        z-index: 1
        top: -10px
        left: auto
        width: 219.3%
        // right: -16px
        margin: 0 auto -3.6em auto
        transform: translate(-27.1%, 0)
        pointer-events: all

.image
    width: 100%
    height: auto

// .preview
//     & div
//         width: 100%
//         & img
//             width: 100%
//     &:first-child
//         position: relative
//         z-index: 2
//     &:nth-child(2)
//         top: 36%
//         right: -18%
//         z-index: 3
//         width: 45%
//     &:nth-child(3)
//         top: -12%
//         right: -7%
//         z-index: 1
//         width: 45%
//     &:nth-child(4)
//         left: 11%
//         bottom: 13%
//         z-index: 3
//         width: 18%
//     &:not(:first-child)
//         position: absolute
    // img
    //     width: 100%