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

.coworking
    position: relative
    text-align: right
    padding-top: 364px
    // display: flex
    // justify-items: flex-end
    +m
        text-align: left
        padding-top: 8.9em
        padding-bottom: 0
        margin-bottom: -2.9em //until button re-added?

.container
    position: relative

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

.stage
    color: $blue

.title
    margin-bottom: 20px

.text
    margin-bottom: 40px
    margin-left: auto
    width: 85%
    color: $neutrals4
    +m
        width: 100%
        margin-left: 0

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

.button
    width: 148px
    +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
//     top: 50%
//     left: -167px
//     width: 1156px
//     transform: translateY(-51%)
//     pointer-events: none
//     +x
//         left: calc(50% - 425px)
//         width: 450px
//     +d
//         left: calc(50% - 365px)
//         width: 320px
//     +t
//         left: calc(50% - 300px)
//     +m
//         position: relative
//         top: auto
//         left: auto
//         right: -16px
//         margin: 0 auto
//         transform: translate(0,0)
//         pointer-events: all

.gallery
    position: absolute
    z-index: 1
    top: 50%
    left: -162px
    width: 1156px
    transform: translateY(-52%)
    pointer-events: none
    +x
        left: calc(50% - 652px)
        width: 908px
    +d
        left: calc(50% - 560px)
        width: 724px
    +t
        left: calc(50% - 480px)
        width: 660px
    +m
        display: none

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

.image
    width: 100%
    height: auto

// .preview
//     &: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%