@keyframes shine-skeleton-lines {
    0 {
        background-position: -100px
    }

    40%,100% {
        background-position: 600px
    }
}

@keyframes spin {
    0 {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes rotateImageLoading {
    from {
        transform: translate(-50%,-50%) rotateY(0) scale(1.01)
    }

    to {
        transform: translate(-50%,-50%) rotateY(360deg) scale(1.01)
    }
}

.swiper-initialized.swiper-horizontal .swiper-button-prev, .swiper-initialized.swiper-horizontal .swiper-button-next {
    display: flex;
    position: absolute;
    margin: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: var(--dg-icon-button-border-radius-base,6px);
    border: var(--dg-icon-button-border-width-base,1px) solid var(--dg-icon-button-border-color-quaternary-default,#c49678);
    background: var(--dg-gradient-bg-copper-default,linear-gradient(47deg,#b77f58 0,#9b613b 62.52%,#804620 96.18%));
    padding: var(--dg-spacing-s-5) var(--dg-spacing-m-1)
}

    .swiper-initialized.swiper-horizontal .swiper-button-prev:before, .swiper-initialized.swiper-horizontal .swiper-button-next:before {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%
    }

    .swiper-initialized.swiper-horizontal .swiper-button-prev:after, .swiper-initialized.swiper-horizontal .swiper-button-next:after {
        position: absolute;
        content: '';
        width: 24px;
        height: 24px;
        background-color: var(--dg-icon-button-icon-color-quaternary-default,#fafafa)
    }

    .swiper-initialized.swiper-horizontal .swiper-button-prev:hover:before, .swiper-initialized.swiper-horizontal .swiper-button-next:hover:before {
        border: var(--dg-icon-button-border-width-base,1px) solid var(--dg-icon-button-border-color-quaternary-hover,#c49678);
        background: var(--dg-gradient-bg-copper-hover,linear-gradient(47deg,#996642 0,#764a2d 52.9%,#562f15 96.18%));
        border-radius: var(--dg-icon-button-border-radius-base,6px)
    }

.swiper-initialized.swiper-horizontal .swiper-button-prev {
    left: 32px
}

    .swiper-initialized.swiper-horizontal .swiper-button-prev:after {
        mask: url("https://www.prod.websites.seat.cloud.vwgroup.com/icons/cupra-diagonal/arrow-left-line.svg") no-repeat 100% 100%;
        -webkit-mask: url("https://www.prod.websites.seat.cloud.vwgroup.com/icons/cupra-diagonal/arrow-left-line.svg") no-repeat 100% 100%;
        -webkit-mask-size: cover;
        mask-size: cover
    }

.swiper-initialized.swiper-horizontal .swiper-button-next {
    right: 32px
}

    .swiper-initialized.swiper-horizontal .swiper-button-next:after {
        mask: url("https://www.prod.websites.seat.cloud.vwgroup.com/icons/cupra-diagonal/arrow-right-line.svg") no-repeat 100% 100%;
        -webkit-mask: url("https://www.prod.websites.seat.cloud.vwgroup.com/icons/cupra-diagonal/arrow-right-line.svg") no-repeat 100% 100%;
        -webkit-mask-size: cover;
        mask-size: cover
    }

.swiper-initialized.swiper-horizontal .swiper-button-disabled {
    opacity: 0;
    pointer-events: none
}

.swiper-button-prev, .swiper-button-next {
    display: none
}

@media(min-width:1440px) {
    .swiper-initialized.swiper-horizontal .swiper-button-prev, .swiper-initialized.swiper-horizontal .swiper-button-next {
        width: 48px;
        height: 48px;
        padding: var(--dg-spacing-m-1) var(--dg-spacing-m-2)
    }

    .swiper-initialized.swiper-horizontal .swiper-button-prev {
        left: 48px
    }

    .swiper-initialized.swiper-horizontal .swiper-button-next {
        right: 48px
    }
}

.cmp-image-title-cards {
    padding: var(--dg-layout-margin) 0;
    height: 568px;
    display: flex
}

.cmp-image-title-cards__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1920px;
    min-width: 320px;
    padding: 0 var(--dg-layout-margin);
    gap: var(--dg-spacing-l-2)
}

.cmp-image-title-cards__title {
    width: 100%;
    height: 80px;
    text-align: center
}

    .cmp-image-title-cards__title .cmp-title__text {
        font-family: var(--dg-font-family-base);
        font-weight: 300;
        text-transform: uppercase;
        font-size: var(--dg-font-size-headline-m);
        line-height: var(--dg-font-height-headline-m);
        letter-spacing: var(--dg-font-letter-spacing-m);
        word-break: break-word;
        margin: 0
    }

.cmp-image-title-cards__title--left {
    text-align: left
}

.cmp-image-title-cards__slider-container {
    width: calc(100% + (var(--dg-layout-margin) * 2));
    margin-left: calc(var(--dg-layout-margin) * -1)
}

    .cmp-image-title-cards__slider-container.swiper-initialized .swiper-button-prev, .cmp-image-title-cards__slider-container.swiper-initialized .swiper-button-next {
        display: none
    }

.cmp-image-title-cards__slider-wrapper {
    display: flex;
    transition-timing-function: linear !important
}

    .cmp-image-title-cards__slider-wrapper:not(.swiper-wrapper) {
        gap: var(--dg-layout-gutter);
        justify-content: center
    }

@media(min-width:480px) {
    .cmp-image-title-cards {
        height: 820px
    }

    .cmp-image-title-cards__container {
        gap: var(--dg-spacing-l-1)
    }

    .cmp-image-title-cards__title {
        width: 361px;
        height: 80px
    }
}

@media(min-width:768px) {
    .cmp-image-title-cards {
        height: 629px
    }

    .cmp-image-title-cards__container {
        gap: var(--dg-spacing-l-2)
    }

    .cmp-image-title-cards__title {
        width: 100%;
        height: 40px
    }
}

@media(min-width:1024px) {
    .cmp-image-title-cards {
        height: 660px
    }
}

@media(min-width:1440px) {
    .cmp-image-title-cards {
        height: 801px
    }

    .cmp-image-title-cards__container {
        gap: 48px
    }

    .cmp-image-title-cards__title {
        height: 48px
    }
}

@media(min-width:1920px) {
    .cmp-image-title-cards {
        height: 966px
    }

    .cmp-image-title-cards__title {
        height: 56px
    }

        .cmp-image-title-cards__title .cmp-title__text {
            font-size: var(--dg-font-size-headline-l);
            line-height: var(--dg-font-height-headline-l);
            margin: 0
        }
}

@media(hover:hover) and (pointer:fine) {
    .cmp-image-title-cards__slider-container:hover .swiper-button-prev, .cmp-image-title-cards__slider-container:hover .swiper-button-next {
        display: flex;
        pointer-events: auto
    }
}

.cmp-image-title-cards-card {
    width: auto;
    height: auto;
    position: relative
}

.cmp-image-title-cards-card__title {
    padding: 16px 8px;
    position: absolute;
    bottom: 6px;
    left: 0
}

    .cmp-image-title-cards-card__title .cmp-title__text {
        font-family: var(--dg-font-family-base);
        font-weight: 400;
        text-transform: uppercase;
        font-size: var(--dg-font-size-headline-xs);
        line-height: var(--dg-font-height-headline-xs);
        letter-spacing: var(--dg-font-letter-spacing-m);
        margin: 0
    }

.cmp-image-title-cards-card__image .cmp-image__image {
    width: 208px;
    height: 374px;
    border-radius: var(--dg-border-radius-m,12px);
    object-fit: cover;
    -webkit-mask-image: -webkit-linear-gradient(180deg,#000 51.42%,rgba(0,0,0,0.5) 82.72%);
    mask-image: linear-gradient(180deg,#000 51.42%,rgba(0,0,0,0.5) 82.72%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%
}

@media(min-width:480px) {
    .cmp-image-title-cards-card__title {
        padding: 24px 16px
    }

    .cmp-image-title-cards-card__image .cmp-image__image {
        width: 352px;
        height: 627px
    }
}

@media(min-width:768px) {
    .cmp-image-title-cards-card__title {
        padding: 20px 16px
    }

    .cmp-image-title-cards-card__image .cmp-image__image {
        width: 271px;
        height: 485px
    }
}

@media(min-width:1440px) {
    .cmp-image-title-cards-card__image .cmp-image__image {
        width: 307px;
        height: 550px
    }
}

@media(min-width:1920px) {
    .cmp-image-title-cards-card__image .cmp-image__image {
        width: 326px;
        height: 585px
    }
}