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

.container
    position: relative
    z-index: 315
    display: flex
    padding-top: 0
    padding-bottom: 0
    top: 0px
    // +fhd
    //     top: -162px
    +w
        top: 0px
    +x
        top: 0px
    +d
        top: 0px
    +t
        top: 0
    +m
        top: 0
    ~ *
        z-index: 320

.card
    display: flex
    // overflow: hidden
    width: 100%
    height: 100%
    border-radius: 1.25em
    background-color: $neutrals2
    +a
        flex-direction: column
        align-items: center

.poster
    position: relative
    display: inline-block
    vertical-align: top
    flex-shrink: 0
    width: 345px
    height: calc(345px * 1.414)
    margin: 0 106px 0 0
    padding: 0
    +d
        margin: 0 64px 0 0
    +t
        width: 280px
        height: calc(280px * 1.414)
        margin: 0 32px 0 0
    +m
        width: 220px
        height: calc(220px * 1.414)
    +a
        width: 65vw
        height: calc(65vw * 1.414)
        margin: 8vw 0
    & div[class^='ProductPoster_poster']
        border-radius: 1.125em 0em 0em 1.125em
        +a
            border-radius: 0.75em 0.75em 0.75em 0.75em
        & img[class^='ProductPoster_image']
            border-radius: 1.25em 0em 0em 1.25em
            +a
                border-radius: 0.8em 0.8em 0.8em 0.8em

.wrap
    position: relative
    z-index: 3
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 368px
    +t
        max-width: 460px
        padding-right: 32px
    +m
        max-width: 100%
        margin-bottom: 18px
    +a
        padding: 0 5vw
        margin-bottom: 8vw

.title
    font-size: 40px
    margin-bottom: 18px
    +m
        font-size: 32px

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

.tags
    display: flex

.label
    +label
    width: min-content
    &:first-child
        margin-right: 0.5em
        background-color: $green
    &:last-child
        background-color: $neutrals3

.btns
    display: flex
    +m
        display: block

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

.buttonStroke
    width: 141px
    height: 52px
    border-radius: 99px
    margin-bottom: 12px
    +m
        width: 100%
    
.scroll
    position: absolute
    bottom: 96px
    +d
        bottom: 48px
    +m
        bottom: 64px

.gallery
    position: absolute
    top: 50%
    right: calc(50% - 465px)
    width: 512px
    transform: translateY(-58%)
    pointer-events: none
    +x
        right: calc(50% - 425px)
        width: 450px
    +d
        right: calc(50% - 365px)
        width: 320px
    +t
        right: calc(50% - 300px)
    +m
        position: relative
        top: auto
        right: auto
        left: -16px
        margin: 0 auto
        transform: translate(0,0)
        pointer-events: all

.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%