Cacher is the code snippet organizer for pro developers

.composition
    position: fixed
    left: 50%
    top: 50%
    transform: translateX(-50%) translateY(-50%)
    z-index: 4
    width: 100%
    height: 100vh
    justify-content: center
    align-items: center
    display: flex
    @include breakpoint($tablet)
        position: relative
        left: 0
        top: 0
        transform: translateX(0) translateY(0)
        background-color: $color-almond
        padding: 40px 0
    @include breakpoint($mobile)
        overflow-x: hidden
        overflow-y: hidden
    &:before
        content: ''
        display: none
        background: url('../img/bgs/bg-3.png') center center no-repeat
        background-size: 790px 768px
        width: 900px
        height: 900px
        position: absolute
        left: 50%
        top: 50%
        transform: translateX(-50%) translateY(-50%)
        z-index: -1
        @include breakpoint($tablet)
            display: block
    @include breakpoint($tablet)
        position: relative
        left: 0
        top: 0
        transform: translateX(0) translateY(0)
    &__container
        display: flex
        justify-content: flex-start
        align-items: flex-start
        @include breakpoint($tablet)
            width: 100%
            max-width: 571px
        @include breakpoint($mobile)
            padding-left: 20px
            padding-right: 20px
            max-width: 100%
        @include breakpoint($mobile-spec-3)
            margin-top: 20px
    &__col
        position: relative
        &_left
            width: 420px
            margin: 0 200px 0 0
            @include breakpoint($tablet)
                margin-right: 0
        &_right
    &__title
        font-family: $font-circe-bold
        font-size: 60px
        color: $color-red
        line-height: 1.466
        text-transform: uppercase
        position: relative
        @include breakpoint($tablet)
            font-size: 50px
            position: absolute
            white-space: nowrap
            left: 0
            opacity: 0
            top: 20px
            visibility: hidden
        @include breakpoint($mobile)
            font-size: 30px
        &_active
            opacity: 1
            top: 0
            visibility: visible
            transition: all 1s ease
    &__list
        margin: 0
        padding: 0
        list-style: none
        position: relative
        @include breakpoint($tablet)
            margin: 110px 20px 0 0
            opacity: 0
            top: 20px
            visibility: hidden
        @include breakpoint($mobile)
            margin: 65px 0px 0 0
        &_active
            opacity: 1
            top: 0
            visibility: visible
            transition: all 1s ease
    &__item
        margin: 0
        padding: 0
        font-family: $font-circe-light
        font-size: 30px
        color: $color-red
        line-height: 1.5
        position: relative
        @include breakpoint($tablet)
            line-height: 1
            margin-bottom: 15px
        @include breakpoint($mobile)
            font-size: 20px
    &__vitamins
        list-style: none
        margin: 58px 0 0 0
        padding: 0
        display: flex
        justify-content: flex-start
        align-items: flex-start
        width: 302px
        flex-wrap: wrap
        @include breakpoint($tablet)
            margin: 95px 0 0 0
            opacity: 0
            top: 20px
            visibility: hidden
        @include breakpoint($mobile)
            width: 163px
            margin: 45px 0 0 0
        @include breakpoint($mobile-spec-2)
            margin: 63px 0 0 33px
        &_active
            opacity: 1
            top: 0
            visibility: visible
            transition: all 1s ease
    &__vitamins-item
        width: 74px
        height: 74px
        margin: 0 40px 40px 0
        font-family: $font-circe-bold
        font-size: 30px
        color: $color-red
        text-align: center
        padding: 24px 0 20px
        line-height: 1
        @extend .icon-oval
        display: block
        @include breakpoint($mobile)
            margin: 0 19px 19px 0
            width: 70px
            height: 70px
            padding: 23px 0 21px
        @include breakpoint($mobile-spec-2)
            width: 50px
            height: 50px
            font-size: 20px
            padding: 17px 0 15px
        &:nth-child(3n+3)
            margin-right: 0
            @include breakpoint($mobile)
                margin-right: 19px
        &:nth-child(2n+2)
            @include breakpoint($mobile)
                margin-right: 0
        &:nth-last-child(-n+3)
            margin-bottom: 0
            @include breakpoint($mobile)
                margin-bottom: 19px
        &:nth-last-child(-n+2)
            @include breakpoint($mobile)
                margin-bottom: 0
        &_special
            position: relative
            &:after
                content: ''
                display: block
                @extend .icon-special-text
                position: absolute
                left: 50%
                top: 50%
                transform: translateX(-50%) translateY(-50%)