Разработка Слайдер в виде флип карточек v2

@import "bourbon";
$font-size-base: 1rem;
$font-size-h2: 1.953rem;
$font-size-h3: 1.5rem;
$font-size-h4: 1.25rem;
//colors
$blue: #0DAFE0;
$orange: invert($blue);
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;

h1, h2, h3, h4, h5, h6 {
    margin-bottom: .5rem;
    font-family: inherit;
    font-weight: 500;
}

body {

    .desktop-wrapper {
        display:flex;
        justify-content:center;
        overflow:hidden;

        .options {
            display:flex;
            flex-direction:row;
            align-items:stretch;
            overflow:hidden;
            min-width:600px;
            width: 100%;
            height:400px;
        
            .option {
                position: relative;
                overflow: hidden;
                min-width: 80px;
                background-size: 750px auto;
                background-repeat: no-repeat;
                cursor: pointer;
                transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
                color: $white;
                
                &.active {
                   flex-grow: 10000;
                   @include transition-property(all);
                   @include transition-duration(.4s);
                   @include transition-timing-function(ease-out);

                    > div {
                        z-index: 1;

                        .info-wrapper {
                            z-index: 999;

                            .title {
                                font-size: $font-size-h2;
                                text-transform: uppercase;
                                line-height: 1;
                                opacity: 1;
                                position: relative;
                                margin: 0 0 .5rem;
                                @include transition-property(opacity);
                                @include transition-duration(.2s);
                                @include transition-timing-function(ease-out);
                                @include transition-delay(.2s);
                            }

                            .subtitle {
                                color: white;
                                font-size: .9rem;
                                letter-spacing: .035rem;
                                line-height: 1.125;
                                margin: 0;
                                @include transition-property(opacity);
                                @include transition-duration(.3s);
                                @include transition-timing-function(ease-out);
                                @include transition-delay(.5s);
                            }

                            .description {
                                left:0px;
                                opacity: 1;
                                margin-top: 1.5rem;
                                @include transition-property(opacity);
                                @include transition-duration(.3s);
                                @include transition-timing-function(ease-out);
                                @include transition-delay(.6s);

                                p {
                                    line-height: 1.5;
                                    margin-bottom: 1.5rem;
                                }
                            }

                            .ext-link {
                                text-decoration: none;
                                width: 6rem;
                                color: $gray-200;
                                text-shadow: 1px 2px 4px rgba($gray-900, .5);
                                box-shadow: 2px 2px 4px rgba($gray-900, .3);
                                background: rgba($white, 0.1);
                                padding: .35rem .75rem;
                                position: relative;
                                overflow: hidden;
                                transition: all 0.2s linear 0s;

                                &:after {
                                    position: absolute;
                                    transition: .3s;
                                    content: '';
                                    width: 0;
                                    left: 0;
                                    bottom: 0;
                                    height: .15rem;
                                    background: rgba($white, 0.2);
                                }

                                &:hover {
                                    text-shadow: none;
                                    box-shadow: 3px 3px 8px rgba($gray-900, .6);
                                    background: rgba($white, 0.15);
                                    color: $white;

                                    &:after {
                                        left: 0;
                                        width: 100%;
                                    }
                                }
                            }
                        }

                        &:before {
                            content: "";
                            position: absolute;
                            height: 100%;
                            width: 101%;
                            top: 0;
                            left: 0;
                            z-index: 1;
                            background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 30%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
                            background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 30%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
                            background: linear-gradient(to bottom, rgba(0,0,0,0.65) 30%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                            @include transition-property(all);
                            @include transition-duration(.2s);
                        }

                        .icon-wrapper {
                            display:flex;
                            align-items: flex-start;
                            align-content: baseline;

                            .category-text {
                                opacity: 1;
                                display: initial;
                                @include transition-property(all);
                                @include transition-duration(.2s);
                            }

                            .category-icon {
                                &:before {
                                    opacity: 1;
                                }
                            }
                        }
                    }
                }

                &:not(.active) {
                    flex-grow:1;
                    filter: grayscale(70%);

                    &:hover {
                        filter: grayscale(0%);
                        
                        > div:before {
                            background: rgba(darken($blue, 40%), 0.5);
                        }
                    }

                    > div {
                        .title, .subtitle, .description {
                            opacity: 0;
                        }

                        .icon-wrapper {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            display: flex;
                            justify-content: flex-end;
                            flex-direction: column;
                            align-items: center;
                            padding-bottom: 1rem;

                            .category-icon {
                                &:before {
                                    opacity: .5;
                                }
                            }
                        }

                        &:before {
                            background: rgba($gray-800, 0.6);
                            content: "";
                            height: 100%;
                            width: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            @include transition-property(all);
                            @include transition-duration(.2s);
                        }
                    }
                }

                > div {
                    height: 100%;
                    width: 100%;
                    display:flex;
                    flex-direction: column;
                    justify-content: space-between;
                    padding: 1rem;
                    position: absolute;
                    top: 0;
                    left: 0;
                    transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);

                    .icon-wrapper {
                        .category-text {
                            line-height: 40px;
                            padding-left: .75rem;
                            opacity: 0;
                            display: none;
                        }

                        .category-icon {
                            display: flex;
                            align-items: flex-start;
                            width: 40px;
                            height: 40px;
                            border-radius: 100%;
                            position: relative;
                            box-shadow: 0 2px 9px rgba($gray-900, .4);

                            &:before {
                                content: '';
                                position: absolute;
                                top: 50%; 
                                left: 50%;
                                transform: translate(-50%, -50%);
                                background-repeat: no-repeat;
                                -webkit-mask-image: url(//themjcl.com/wp-content/uploads/2019/02/sports_biotech_icon.svg);
                                mask-image: url(//themjcl.com/wp-content/uploads/2019/02/sports_biotech_icon.svg);
                                background-color: $white;
                                height: 20px;
                                width: 21px;
                            }
                        }

                        &.sb {
                            .category-icon {
                                background-color: $blue;
                            }
                        }
                        
                        &.ce {
                            .category-icon {
                                background-color: $orange;
                            }
                        }
                    }
                }
            }
        }
    }
}
                                


// Add background images
.options {
    > :nth-child(1) {
        background-color: darken(desaturate(adjust-hue($blue, 44), 72.11), 8.24);
        background-image: url("//themjcl.com/wp-content/uploads/2019/02/playr.jpg");
        background-position: center center;
        background-size: cover;
    }
    > :nth-child(2) {
        background-color: darken(desaturate(adjust-hue($blue, -180), 51.45), 15.69);
        background-image: url("//themjcl.com/wp-content/uploads/2019/02/encased.jpg");
        background-position: center center;
        background-size: cover;
    }
    > :nth-child(3) {
        background-color: darken(desaturate(adjust-hue($blue, -136), 55.70), 31.76);
        background-image: url("//themjcl.com/wp-content/uploads/2019/02/orthomovement.jpg");
        background-position: center center;
        background-size: cover;
    }
    > :nth-child(4) {
        background-color: lighten(desaturate(adjust-hue($blue, 17), 37.63), 11.57);
        background-image: url("//themjcl.com/wp-content/uploads/2019/02/spyslide.jpg");
        background-position: center center;
        background-size: cover;
    }
    > :nth-child(5) {
        background: $gray-200;
        background-image: url("//themjcl.com/wp-content/uploads/2019/02/tapedesign.jpg");
        background-position: center center;
        background-size: cover;
    }
    > :nth-child(6) {
        background-color: darken(desaturate(adjust-hue($blue, 10), 33.77), 31.57);
        background-image: url("//themjcl.com/wp-content/uploads/2019/02/bolleraven.jpg");
        background-position: center center;
        background-size: cover;
    }
}

.mobile-wrapper {
    height: initial;
    max-width: 320px;
    margin: 0 auto;

    .options {
        position: relative;
        height: auto;
        max-width: none !important;
        flex-basis: 100% !important;

        .option {
            position: relative;
            overflow: hidden;
            background-size:auto 120%;
            background-position:center;
            transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
            color: $white;

            > div {
                z-index: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 100%;
                width: 100%;
                padding: 2rem 1rem 1rem;
                top: 0;
                left: 0;
                transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);

                .info-wrapper {
                    z-index: 999;

                    .title {
                        font-size: $font-size-h3;
                        text-shadow: 1px 2px 4px rgba($gray-900, .5);
                        text-transform: uppercase;
                        line-height: 1;
                        opacity: 1;
                        position: relative;
                        margin: 0 0 .5rem;
                        @include transition-property(opacity);
                        @include transition-duration(.2s);
                        @include transition-timing-function(ease-out);
                        @include transition-delay(.2s);
                    }

                    .subtitle {
                        color: white;
                        font-size: .8rem;
                        letter-spacing: .06rem;
                        line-height: 1.125;
                        margin: 0;
                        @include transition-property(opacity);
                        @include transition-duration(.3s);
                        @include transition-timing-function(ease-out);
                        @include transition-delay(.5s);
                    }

                    .description {
                        left:0px;
                        opacity: 1;
                        margin-top: 1.5rem;
                        @include transition-property(opacity);
                        @include transition-duration(.3s);
                        @include transition-timing-function(ease-out);
                        @include transition-delay(.6s);

                        p {
                            line-height: 1.5;
                            margin-bottom: 1.5rem;
                        }
                    }

                    .ext-link {
                        text-decoration: none;
                        width: 6rem;
                        color: $gray-200;
                        text-shadow: 1px 2px 4px rgba($gray-900, .5);
                        box-shadow: 2px 2px 4px rgba($gray-900, .3);
                        background: rgba($white, 0.1);
                        padding: .35rem .75rem;
                        position: relative;
                        overflow: hidden;
                        transition: all 0.2s linear 0s;

                        &:after {
                            position: absolute;
                            transition: .3s;
                            content: '';
                            width: 0;
                            left: 0;
                            bottom: 0;
                            height: .15rem;
                            background: rgba($white, 0.2);
                        }

                        &:hover {
                            text-shadow: none;
                            box-shadow: 3px 3px 8px rgba($gray-900, .6);
                            background: rgba($white, 0.15);
                            color: $white;

                            &:after {
                                left: 0;
                                width: 100%;
                            }
                        }
                    }
                }

                .icon-wrapper {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    padding: 2rem 0 0;
                    z-index: 999;
                    opacity: 0.8;

                    .category-text {
                        line-height: 40px;
                        padding-left: .75rem;
                    }

                    .category-icon {
                        display: flex;
                        align-items: flex-start;
                        width: 32px;
                        height: 32px;
                        border-radius: 100%;
                        position: relative;
                        box-shadow: 0 2px 9px rgba($gray-900, .4);

                        &:before {
                            content: '';
                            position: absolute;
                            top: 50%; 
                            left: 50%;
                            transform: translate(-50%, -50%);
                            background-repeat: no-repeat;
                            -webkit-mask-image: url(//themjcl.com/wp-content/uploads/2019/02/sports_biotech_icon.svg);
                            mask-image: url(//themjcl.com/wp-content/uploads/2019/02/sports_biotech_icon.svg);
                            background-color: $white;
                            height: 16px;
                            width: 16px;
                        }
                    }

                    &.sb {
                        .category-icon {
                            background-color: $blue;
                        }
                    }
                    
                    &.ce {
                        .category-icon {
                            background-color: $orange;
                        }
                    }
                }

                &:before {
                    content: "";
                    position: absolute;
                    height: 100%;
                    width: 101%;
                    top: 0;
                    left: 0;
                    z-index: 1;
                    background: rgba($gray-800, 0.7);
                    @include transition-property(all);
                    @include transition-duration(.2s);
                }
            }
        }
    }
}

// Center screen version titles
.container .row h4:first-of-type {
  text-align: center;
  margin: 0 auto;
  padding-bottom: 1rem;
}