﻿@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)
    }
}

@keyframes shine-skeleton-lines {
    0 {
        background-position: -100px
    }

    40%,100% {
        background-position: 600px
    }
}

.cmp-banner-highlight {
    position: relative;
    background-color: var(--color-bg-02)
}

.cmp-banner-highlight__image {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

    .cmp-banner-highlight__image .cmp-image__image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center
    }

    .cmp-banner-highlight__image:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: linear-gradient(90deg,rgba(0,0,0,0.2) 0,rgba(0,0,0,0) 40.53%)
    }

.cmp-banner-highlight__container {
    min-height: 474px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1436px;
    padding: 0 16px;
    padding: 36px 16px
}

@media(min-width:764px) {
    .cmp-banner-highlight__container {
        padding: 0 32px
    }
}

.cmp-banner-highlight__title {
    max-width: 288px
}

    .cmp-banner-highlight__title .cmp-title__text {
        color: var(--color-font-03);
        font-family: 'CupraBook',sans-serif;
        font-weight: 400;
        text-transform: uppercase;
        font-size: 24px;
        line-height: 28px
    }

.cmp-banner-highlight__text .cmp-text p {
    color: var(--color-font-03);
    font-family: 'CupraBook',sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px
}

    .cmp-banner-highlight__text .cmp-text p > a {
        color: var(--color-font-03);
        text-decoration: underline
    }

.cmp-banner-highlight__text .cmp-text {
    margin-top: 16px
}

.cmp-banner-highlight__footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px
}

    .cmp-banner-highlight__footer .cmp-button {
        min-width: 263px
    }

@media(min-width:764px) {
    .cmp-banner-highlight__container {
        padding: 96px 48px;
        min-height: 384px
    }

    .cmp-banner-highlight__title {
        max-width: 316px
    }

        .cmp-banner-highlight__title .cmp-title__text {
            font-size: 30px;
            line-height: 36px
        }

    .cmp-banner-highlight__text {
        max-width: 244px
    }

    .cmp-banner-highlight__footer {
        margin-top: 16px;
        flex-direction: row;
        gap: 24px
    }

        .cmp-banner-highlight__footer .cmp-button {
            min-width: 130px
        }
}

@media(min-width:1016px) {
    .cmp-banner-highlight__container {
        padding: 146px 64px;
        min-height: 550px
    }

    .cmp-banner-highlight__title {
        max-width: 372px
    }

        .cmp-banner-highlight__title .cmp-title__text {
            font-size: 40px;
            line-height: 44px
        }

    .cmp-banner-highlight__text {
        max-width: 372px
    }

        .cmp-banner-highlight__text .cmp-text p {
            font-size: 24px;
            line-height: 28px
        }

            .cmp-banner-highlight__text .cmp-text p > a {
                text-decoration: underline
            }

        .cmp-banner-highlight__text .cmp-text {
            margin-top: 24px
        }

    .cmp-banner-highlight__footer {
        margin-top: 32px;
        gap: 32px
    }

        .cmp-banner-highlight__footer .cmp-button {
            min-width: 146px
        }
}

@media(min-width:1436px) {
    .cmp-banner-highlight__container {
        padding: 182px 64px;
        min-height: 622px
    }

    .cmp-banner-highlight__footer .cmp-button {
        min-width: 154px
    }
}
