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

.section
    position: relative
    overflow: hidden
    padding: 111px 0
    +m
        padding: 0 0 84px 0
        background: none

.background
    overflow: hidden
    position: absolute
    bottom: 0
    right: -7.3%
    width: 111vw
    height: calc(111vw * .6546)
    background-image: url(../../../images/product/fpv.png)
    background-repeat: no-repeat
    background-size: 100% 100%
    background-position-y: calc(calc(calc(111vw * .6546) - 950px) / 2)
    z-index: 300
    +w
        background-position-y: bottom
    +x
        // min-height: calc(115vw * .8)
        height: 95vh
        width: calc(95vh * 1.5276)
        left: calc(calc(95vh * 1.5276) * -.08)
    +d
        height: 95vh
        width: calc(95vh * 1.5276)
        left: calc(calc(95vh * 1.5276) * -.15)
    +t
        height: 106vh
        width: calc(106vh * 1.5276)
        left: calc(calc(106vh * 1.5276) * -.3)
    +m
        display: none
        height: 125%
    +a
        height: 74vh
        width: calc(74vh * 1.5276)
        left: calc(calc(74vh * 1.5276) * -.25)

.m_gallery
    display: none
    +m
        display: block
        position: relative
        z-index: 1
        top: 0
        left: 0
        width: 213.33%
        // right: -16px
        margin: 3em auto 0.69em auto
        transform: translate(-20.95%, 0)
        pointer-events: all
        button
            position: absolute
            top: 50%
            left: calc(20.95% + 50vw)
            transform: translate(-50%, -50%)

.image
    width: 100%
    height: auto

.container
    position: relative
    z-index: 305
    +m
        padding: 0 16px

.gallery
    position: absolute
    top: 50%
    right: calc(50% - 640px)
    width: 624px
    transform: translateY(-50%)
    +x
        right: calc(50% - 610px)
        width: 580px
    +d
        right: calc(50% - 560px)
    +t
        right: calc(50% - 500px)
    +m
        display: none
        position: relative
        top: auto
        left: 50%
        width: 500px
        transform: translate(-50%,0)

// .preview
//     &:first-child
//         position: relative
//         z-index: 2
//     &:nth-child(2)
//         top: 14%
//         right: 13%
//         z-index: 3
//         width: 29.5%
//     &:nth-child(3)
//         top: 46%
//         left: 15%
//         z-index: 1
//         width: 17%
//     &:nth-child(4)
//         right: 3%
//         bottom: 17%
//         z-index: 1
//         width: 33.5%
//     &:not(:first-child)
//         position: absolute
//     img
//         width: 100%

.wrap
    position: relative
    z-index: 3
    max-width: 459px
    margin-right: auto
    padding: 48px
    background: $neutrals1
    box-shadow: 0px 64px 64px -48px rgba(15, 15, 15, 0.1)
    border-radius: 20px
    +x
        max-width: 459px
    +d
        max-width: 416px
        padding: 32px
    +t
        max-width: 360px
        padding: 32px
    +m
        padding: 32px 26px 32px 32px
        max-width: 100%

.title
    margin-top: 15px
    margin-bottom: 24px

.info
    margin-bottom: 24px
    padding-right: 4px
    color: $neutrals4

.list
    margin-bottom: 24px

.item
    display: flex
    padding: 24px
    border-radius: 12px
    // cursor: pointer
    transition: box-shadow .2s
    // &:hover
    //     box-shadow: inset 0 0 0 2px $neutrals3
    &:not(:last-chivld)
        margin-bottom: 4px
    +m
        padding-right: 0

.icon
    display: flex
    justify-content: center
    align-items: center
    flex-shrink: 0
    width: 40px
    height: 40px
    margin-right: 24px
    border-radius: 50%

.details
    flex-grow: 1
    margin-right: 2px

.subtitle
    margin-bottom: 4px
    font-weight: 600

.content
    max-width: 260px
    +caption-1
    color: $neutrals4

.play
    z-index: 10