@import ../../styles/helpers

.container
    display: block
    position: relative
    bottom: -86px
    // left: 50%
    // transform: translateX(-50%)
    height: 151px
    width: 90%
    max-width: 1196px
    +t
        height: 116px
    +m
        display: none

.community
    position: absolute
    z-index: 5
    transform: translateY(-100%)
    top: 0
    right: 0
    width: 304px
    height: 61px
    border-radius: 12px 12px 0px 0px
    display: flex
    justify-content: center
    align-items: center
    font-size: 16px
    font-weight: 700
    text-decoration: none
    color: white !important
    fill: white
    background: linear-gradient(270deg, #3772FF, #9757D7)
    box-shadow: 20px 20px 40px #0000004D;
    +t
        width: 234px
        height: 47px
        font-size: 13px

.comicon
    margin-left: 1.2em
    +t
        margin-left: 1em
        transform: scale(85%)

.list
    position: relative
    z-index: 10
    // top: 50%
    // transform: translateY(-50%)
    width: 100%
    height: 100%
    border-radius: 22px 0px 22px 22px
    background-color: $neutrals2
    box-shadow: 20px 20px 40px #0000004D;
    display: flex
    flex-wrap: wrap
    align-content: center
    justify-content: space-evenly
    margin: 0 //-12px
    +d
        margin: 0 //-8px
    +m
        margin: 0 //-32px
        overflow: auto
        overflow-x: auto 
        -ms-overflow-style: none
        scrollbar-width: none
        -webkit-overflow-scrolling: touch
        &::-webkit-scrollbar
            display: none 
        &:before,
        &:after
            content: ""
            flex-shrink: 0
            width: 32px
            height: 1px

.logo
    // flex: 0
    display: inline-block
    // margin: 0
    min-width: 0
    // +d
    //     margin: 0 8px
    +m
        flex: 0 0 140px
        // margin: 0
    img
        height: 100%
    &:first-child
        // margin-left: 5%
    // &:not(:last-child)
    //     +m
    //         margin-right: 16px


//******
// Mobile
//******

.m_container
    display: none
    +m
        display: block
        position: relative
        z-index: 305
        bottom: -7.4em
        // left: 50%
        // transform: translateX(-50%)
        height: 16em //255px
        width: 100%
        // max-width: 1196px
        background-color: #0D0D0D

.m_list
    position: relative
    top: 50%
    transform: translateY(-50%)
    width: 100%
    display: block
    text-align: center
    margin: 0 //-12px
    p
        font-size: 14px
        font-weight: 600
        margin: 0 0 3.7em 0

.m_slider
    padding-bottom: 75px
    & > div > div > div
        position: relative
        opacity: 1 !important

.m_logo
    position: relative
    left: 50%
    transform: translateX(-50%)
    display: inline-block
    min-width: 0
    flex: 0 0 3.8em
    // margin-right: 100%
    div
        position: relative
        left: 0
        top: 50%
        transform: translateY(-50%)
        width: 100%
        img
            height: 100%
    // &:first-child
        // margin-left: 5%
    // &:not(:last-child)
    //     +m
    //         margin-right: 16px