﻿.gallery-carworld {
    padding: 32px 16px 66px;
    overflow: hidden
}

    .gallery-carworld .gallery-title {
        width: 100%
    }

        .gallery-carworld .gallery-title .title {
            width: 100%;
            margin: 0 0 12px;
            font-family: "SeatBlack";
            font-size: 24px;
            line-height: 1.17
        }

        .gallery-carworld .gallery-title .subtitle {
            width: 100%;
            margin-top: 12px;
            margin-bottom: 30px;
            font-family: "SeatRegular";
            font-size: 14px;
            line-height: 1.43
        }

    .gallery-carworld .swiper-container {
        overflow: visible
    }

        .gallery-carworld .swiper-container .swiper-scrollbar {
            background: rgba(236,233,225,0.4);
            height: 2px;
            bottom: -26px;
            width: 94%;
            left: 0
        }

            .gallery-carworld .swiper-container .swiper-scrollbar .swiper-scrollbar-drag {
                background: #ece9e1
            }

        .gallery-carworld .swiper-container .swiper-button-prev {
            visibility: hidden
        }

        .gallery-carworld .swiper-container .swiper-button-next {
            visibility: hidden
        }

    .gallery-carworld .d-none {
        display: none
    }

    .gallery-carworld .highlight-container {
        display: flex
    }

        .gallery-carworld .highlight-container .highlight {
            margin-right: 16px;
            display: flex;
            flex-direction: column
        }

        .gallery-carworld .highlight-container .highlight-img-container {
            position: relative;
            margin: 0 0 22px
        }

            .gallery-carworld .highlight-container .highlight-img-container span[data-platform="vimeo"] {
                width: 206px
            }

        .gallery-carworld .highlight-container .highlight .highlight-img {
            position: absolute;
            bottom: 0
        }

        .gallery-carworld .highlight-container .highlight-eyebrow {
            width: 100%;
            margin: 0 0 8px;
            font-family: "SeatMedium";
            font-size: 14px;
            line-height: 1.14
        }

        .gallery-carworld .highlight-container .highlight .thumbnail-img {
            position: absolute;
            min-width: 100%;
            min-height: 100%;
            width: 100%;
            object-fit: cover;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%)
        }

        .gallery-carworld .highlight-container .highlight .play-block {
            position: absolute;
            top: auto;
            bottom: 0
        }

            .gallery-carworld .highlight-container .highlight .play-block .ico-play {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                bottom: 0;
                margin: 0;
                min-width: auto;
                min-height: auto;
                width: 23px;
                height: 16px;
                background-image: url(clientlibs/resources/ico-play-white.svg);
                background-repeat: no-repeat;
                background-position: center center;
                background-size: cover
            }

            .gallery-carworld .highlight-container .highlight .play-block .play-black-btn {
                border: 0;
                width: 56px;
                height: 56px;
                padding: 16px 19px 17px 21px;
                opacity: .9;
                background-color: #190f14
            }

        .gallery-carworld .highlight-container .highlight-title {
            width: 100%;
            margin: 0 0 13px;
            font-family: "SeatBold";
            font-size: 16px;
            line-height: 1.25
        }

        .gallery-carworld .highlight-container .highlight-description {
            width: 100%;
            font-family: "SeatRegular";
            font-size: 14px;
            line-height: 1.43;
            margin-bottom: 8px
        }

        .gallery-carworld .highlight-container .highlight .cta-button {
            font-family: "SeatMedium";
            font-size: 14px;
            line-height: 1.14;
            padding: 12px 0 12px
        }

            .gallery-carworld .highlight-container .highlight .cta-button::after {
                width: 24px;
                height: 24px;
                font-size: 22px
            }

    .gallery-carworld.bg-190F14 .gallery-title .subtitle {
        color: #98928f
    }

    .gallery-carworld.bg-190F14 .highlight-container .highlight-eyebrow {
        color: #98928f
    }

    .gallery-carworld.bg-190F14 .highlight-container .highlight-description {
        color: #98928f
    }

    .gallery-carworld.bg-FFFFFF .gallery-title .subtitle {
        color: #747468
    }

    .gallery-carworld.bg-FFFFFF .highlight-container .highlight-eyebrow {
        color: #747468
    }

    .gallery-carworld.bg-FFFFFF .highlight-container .highlight-description {
        color: #747468
    }

    .gallery-carworld.beauty-fixes .swiper-container .swiper-scrollbar {
        bottom: -16px
    }

    .gallery-carworld.beauty-fixes .highlight-container .highlight-img-container {
        margin: 0 0 18px
    }

@media(min-width: 764px) {
    .gallery-carworld {
        padding: 72px 32px 53px
    }

        .gallery-carworld .gallery-title .subtitle {
            margin-top: 13px;
            margin-bottom: 46px
        }

        .gallery-carworld .swiper-container .swiper-scrollbar {
            bottom: -34px;
            width: 62%;
            left: 17%
        }

        .gallery-carworld .highlight-container .slick-dots {
            width: 456px;
            left: 125px
        }

        .gallery-carworld .highlight-container .highlight {
            margin-right: 32px
        }

        .gallery-carworld .highlight-container .highlight-img-container {
            margin: 0 0 26px
        }

            .gallery-carworld .highlight-container .highlight-img-container span[data-platform="vimeo"] {
                width: 346px
            }

        .gallery-carworld .highlight-container .highlight-title {
            margin: 0 0 17px
        }

        .gallery-carworld .highlight-container .highlight-description {
            margin-bottom: 12px
        }

        .gallery-carworld.beauty-fixes .swiper-container .swiper-scrollbar {
            bottom: -13px
        }
}

@media(min-width: 1016px) {
    .gallery-carworld {
        padding: 72px 0 74px 32px
    }

        .gallery-carworld .swiper-container .swiper-scrollbar {
            width: 63%
        }

        .gallery-carworld .swiper-container:hover .swiper-button-prev {
            opacity: 1;
            transition: none
        }

        .gallery-carworld .swiper-container:hover .swiper-button-next {
            opacity: 1;
            transition: none
        }

        .gallery-carworld .swiper-container .swiper-button-prev {
            width: 40px;
            height: 40px;
            background-color: #fff;
            border-radius: 2px;
            background-image: url("../../../../seat-website/components/content/common/steps/clientlibs/resources/icon-left.png");
            top: 30%;
            left: 16px;
            opacity: 0;
            transition: opacity .2s linear;
            visibility: visible
        }

            .gallery-carworld .swiper-container .swiper-button-prev::after {
                display: none
            }

        .gallery-carworld .swiper-container .swiper-button-next {
            width: 40px;
            height: 40px;
            background-color: #fff;
            border-radius: 2px;
            background-image: url("../../../../seat-website/components/content/common/steps/clientlibs/resources/icon-right.png");
            top: 30%;
            right: 47px;
            opacity: 0;
            transition: opacity .2s linear;
            visibility: visible
        }

            .gallery-carworld .swiper-container .swiper-button-next::after {
                display: none
            }

        .gallery-carworld .gallery-title {
            width: 100%;
            display: flex;
            justify-content: space-between
        }

            .gallery-carworld .gallery-title .title {
                width: 100%;
                margin: 0;
                font-size: 30px;
                line-height: 1.07
            }

            .gallery-carworld .gallery-title .subtitle {
                width: 100%;
                margin: 0 32px 56px 32px;
                font-size: 16px;
                line-height: 1.5
            }

        .gallery-carworld .highlight-container .highlight-img-container {
            margin: 0 0 32px
        }

            .gallery-carworld .highlight-container .highlight-img-container span[data-platform="vimeo"] {
                width: 287px
            }

        .gallery-carworld .highlight-container .highlight-eyebrow {
            font-size: 16px;
            line-height: 1.25
        }

        .gallery-carworld .highlight-container .highlight-title {
            margin: 0 0 16px;
            font-size: 20px;
            line-height: 1.2
        }

        .gallery-carworld .highlight-container .highlight-description {
            margin-bottom: 12px;
            font-size: 16px;
            line-height: 1.5
        }

        .gallery-carworld .highlight-container .highlight .cta-button {
            font-size: 16px;
            line-height: 1.25
        }

        .gallery-carworld.beauty-fixes {
            padding: 72px 0 61px 32px
        }

            .gallery-carworld.beauty-fixes .swiper-container .swiper-scrollbar {
                bottom: -21px
            }

            .gallery-carworld.beauty-fixes .swiper-container .swiper-button-next {
                top: 43%
            }

            .gallery-carworld.beauty-fixes .swiper-container .swiper-button-prev {
                top: 43%
            }

            .gallery-carworld.beauty-fixes .highlight-container .highlight-img-container {
                margin: 0 0 16px
            }
}

@media(min-width: 1436px) {
    .gallery-carworld .gallery-title .subtitle {
        margin: 0 32px 56px 32px
    }

    .gallery-carworld .swiper-container .swiper-button-prev {
        top: 36%
    }

    .gallery-carworld .swiper-container .swiper-button-next {
        top: 36%
    }

    .gallery-carworld .swiper-container .swiper-scrollbar {
        left: 25%;
        width: 48%;
        bottom: -33px
    }

    .gallery-carworld .swiper-container .highlight {
        width: 553px
    }

    .gallery-carworld .swiper-container .highlight-img-container {
        margin: 0 0 32px
    }

    .gallery-carworld .swiper-container .highlight-title {
        font-size: 20px
    }

    .gallery-carworld.beauty-fixes .swiper-container .swiper-button-next {
        top: 46%
    }

    .gallery-carworld.beauty-fixes .swiper-container .swiper-button-prev {
        top: 46%
    }

    .gallery-carworld.beauty-fixes .highlight-container .highlight-img-container {
        margin: 0 0 16px
    }

        .gallery-carworld.beauty-fixes .highlight-container .highlight-img-container span[data-platform="vimeo"] {
            width: 420px
        }
}
