﻿@keyframes shine-skeleton-lines {
    0 {
        background-position: -100px
    }

    40%,100% {
        background-position: 600px
    }
}

.mod__max-w-xl {
    max-width: 1436px;
    margin: auto
}

.cmp-two-columns__top {
    position: relative;
    margin-bottom: 64px
}

    .cmp-two-columns__top div:nth-child(2) {
        margin-top: 8px
    }

.cmp-two-columns__title {
    position: relative
}

.cmp-two-columns__text {
    position: relative
}

    .cmp-two-columns__text p {
        margin-bottom: 0
    }

.cmp-two-columns-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 64px
}

.cmp-two-columns-card__media {
    position: relative;
    flex-shrink: 0
}

    .cmp-two-columns-card__media .cmp-image {
        position: relative;
        width: 100%;
        height: 100%
    }

    .cmp-two-columns-card__media .cmp-image__image {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .cmp-two-columns-card__media .cmp-video {
        position: relative;
        width: 100%;
        height: 100%
    }

    .cmp-two-columns-card__media .cmp-video__wrapper {
        position: relative;
        width: 100%;
        height: 100%
    }

    .cmp-two-columns-card__media .cmp-video__video {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .cmp-two-columns-card__media .cmp-video .spinner-video-spinner .progress-bar .progress-inactive {
        display: none
    }

    .cmp-two-columns-card__media .cmp-video .spinner-video-spinner .progress-bar .progress-active {
        display: none
    }

    .cmp-two-columns-card__media .cmp-video .spinner-video-spinner:not(.play-video):not(.pause-video) {
        border-radius: 100%;
        right: 16px;
        bottom: 16px;
        cursor: pointer
    }

    .cmp-two-columns-card__media .cmp-video .spinner-video-spinner .icon-svg {
        transform: unset;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0
    }

.cmp-two-columns-card__info {
    position: relative
}

.cmp-two-columns-card__titletop {
    position: relative;
    margin-bottom: 8px
}

.cmp-two-columns-card__title {
    position: relative
}

.cmp-two-columns-card__text {
    position: relative;
    margin-top: 8px
}

    .cmp-two-columns-card__text p, .cmp-two-columns-card__text ol {
        margin-bottom: 0
    }

.cmp-two-columns-card__buttons {
    position: relative;
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    gap: 24px
}

    .cmp-two-columns-card__buttons .mod__secondary-button, .cmp-two-columns-card__buttons .mod__light-secondary-button, .cmp-two-columns-card__buttons .mod__primary-button, .cmp-two-columns-card__buttons .mod__light-primary-button {
        width: 100%
    }

        .cmp-two-columns-card__buttons .mod__secondary-button .cmp-button, .cmp-two-columns-card__buttons .mod__light-secondary-button .cmp-button, .cmp-two-columns-card__buttons .mod__primary-button .cmp-button, .cmp-two-columns-card__buttons .mod__light-primary-button .cmp-button {
            padding: 16px;
            height: auto
        }

        .cmp-two-columns-card__buttons .mod__secondary-button .app-store, .cmp-two-columns-card__buttons .mod__light-secondary-button .app-store, .cmp-two-columns-card__buttons .mod__primary-button .app-store, .cmp-two-columns-card__buttons .mod__light-primary-button .app-store, .cmp-two-columns-card__buttons .mod__secondary-button .play-store, .cmp-two-columns-card__buttons .mod__light-secondary-button .play-store, .cmp-two-columns-card__buttons .mod__primary-button .play-store, .cmp-two-columns-card__buttons .mod__light-primary-button .play-store {
            justify-content: flex-start
        }

    .cmp-two-columns-card__buttons .cmp-qr__button .cmp-icon-button {
        padding: 16px 8px
    }

.cmp-two-columns-card[data-position="left"] .cmp-two-columns-card__media, .cmp-two-columns-card[data-position="right"] .cmp-two-columns-card__media {
    order: 2
}

.cmp-two-columns-card[data-position="left"] .cmp-two-columns-card__info, .cmp-two-columns-card[data-position="right"] .cmp-two-columns-card__info {
    order: 1
}

.cmp-two-columns-card[data-aspect="ratio-1"] .cmp-two-columns-card__media {
    aspect-ratio: 1/1
}

.cmp-two-columns-card[data-aspect="ratio-9"] .cmp-two-columns-card__media {
    aspect-ratio: 9/16
}

.cmp-two-columns-card[data-aspect="ratio-16"] .cmp-two-columns-card__media {
    aspect-ratio: 16/9
}

.cmp-two-columns-card:last-child {
    margin-bottom: 0
}

@media(min-width:764px) {
    .cmp-two-columns__top {
        margin-bottom: 92px
    }

    .cmp-two-columns__title .cmp-title__text {
        font-size: 40px;
        margin: 0
    }

    .cmp-two-columns__text .cmp-text, .cmp-two-columns__text .cmp-text p {
        font-size: 20px
    }

        .cmp-two-columns__text .cmp-text a {
            text-decoration: underline
        }

        .cmp-two-columns__text .cmp-text h1, .cmp-two-columns__text .cmp-text h2, .cmp-two-columns__text .cmp-text h3, .cmp-two-columns__text .cmp-text h4, .cmp-two-columns__text .cmp-text h5, .cmp-two-columns__text .cmp-text blockquote, .cmp-two-columns__text .cmp-text pre {
            font-size: 20px
        }

    .cmp-two-columns-card {
        flex-direction: unset;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 96px
    }

    .cmp-two-columns-card__media {
        width: auto
    }

        .cmp-two-columns-card__media .cmp-video .spinner-video-spinner:not(.play-video):not(.pause-video) {
            right: auto;
            left: 24px;
            bottom: 24px
        }

    .cmp-two-columns-card__info {
        width: auto
    }

    .cmp-two-columns-card__titletop {
        margin-bottom: 16px
    }

    .cmp-two-columns-card__text {
        margin-top: 16px
    }

        .cmp-two-columns-card__text .cmp-text, .cmp-two-columns-card__text .cmp-text p {
            font-size: 16px
        }

            .cmp-two-columns-card__text .cmp-text a {
                text-decoration: underline
            }

            .cmp-two-columns-card__text .cmp-text h1, .cmp-two-columns-card__text .cmp-text h2, .cmp-two-columns-card__text .cmp-text h3, .cmp-two-columns-card__text .cmp-text h4, .cmp-two-columns-card__text .cmp-text h5, .cmp-two-columns-card__text .cmp-text blockquote, .cmp-two-columns-card__text .cmp-text pre {
                font-size: 16px
            }

    .cmp-two-columns-card__buttons {
        margin-top: 20px;
        gap: 20px
    }

        .cmp-two-columns-card__buttons .mod__secondary-button, .cmp-two-columns-card__buttons .mod__light-secondary-button, .cmp-two-columns-card__buttons .mod__primary-button, .cmp-two-columns-card__buttons .mod__light-primary-button {
            width: auto
        }

            .cmp-two-columns-card__buttons .mod__secondary-button .cmp-button, .cmp-two-columns-card__buttons .mod__light-secondary-button .cmp-button, .cmp-two-columns-card__buttons .mod__primary-button .cmp-button, .cmp-two-columns-card__buttons .mod__light-primary-button .cmp-button {
                width: auto;
                padding: 16px 38px;
                display: inline-flex;
                min-width: 193px
            }

    .cmp-two-columns-card[data-position="left"] .cmp-two-columns-card__media {
        order: 1
    }

    .cmp-two-columns-card[data-position="left"] .cmp-two-columns-card__info {
        order: 2
    }

    .cmp-two-columns-card[data-position="right"] .cmp-two-columns-card__media {
        order: 2
    }

    .cmp-two-columns-card[data-position="right"] .cmp-two-columns-card__info {
        order: 1
    }

    .cmp-two-columns-card[data-aspect="ratio-1"] {
        gap: 40px
    }

        .cmp-two-columns-card[data-aspect="ratio-1"] .cmp-two-columns-card__media {
            width: 348px
        }

    .cmp-two-columns-card[data-aspect="ratio-9"] {
        padding: 0 55px;
        gap: 62px
    }

        .cmp-two-columns-card[data-aspect="ratio-9"] .cmp-two-columns-card__media {
            width: 219px
        }

    .cmp-two-columns-card[data-aspect="ratio-16"] {
        gap: 24px
    }

        .cmp-two-columns-card[data-aspect="ratio-16"] .cmp-two-columns-card__media {
            width: 456px
        }
}

@media(min-width:1016px) {
    .cmp-two-columns-card__text .cmp-text, .cmp-two-columns-card__text .cmp-text p {
        font-size: 18px
    }

        .cmp-two-columns-card__text .cmp-text a {
            text-decoration: underline
        }

        .cmp-two-columns-card__text .cmp-text h1, .cmp-two-columns-card__text .cmp-text h2, .cmp-two-columns-card__text .cmp-text h3, .cmp-two-columns-card__text .cmp-text h4, .cmp-two-columns-card__text .cmp-text h5, .cmp-two-columns-card__text .cmp-text blockquote, .cmp-two-columns-card__text .cmp-text pre {
            font-size: 18px
        }

    .cmp-two-columns-card__buttons {
        margin-top: 32px
    }

        .cmp-two-columns-card__buttons .mod__secondary-button .cmp-button, .cmp-two-columns-card__buttons .mod__light-secondary-button .cmp-button, .cmp-two-columns-card__buttons .mod__primary-button .cmp-button, .cmp-two-columns-card__buttons .mod__light-primary-button .cmp-button {
            padding: 16px 30px
        }

    .cmp-two-columns-card[data-aspect="ratio-1"] {
        gap: 40px
    }

        .cmp-two-columns-card[data-aspect="ratio-1"] .cmp-two-columns-card__media {
            width: 516px
        }

    .cmp-two-columns-card[data-aspect="ratio-9"] {
        padding: 0;
        gap: 152px
    }

        .cmp-two-columns-card[data-aspect="ratio-9"] .cmp-two-columns-card__media {
            width: 304px
        }

    .cmp-two-columns-card[data-aspect="ratio-16"] {
        gap: 32px
    }

        .cmp-two-columns-card[data-aspect="ratio-16"] .cmp-two-columns-card__media {
            width: 464px
        }
}

@media(min-width:1436px) {
    .cmp-two-columns__title .cmp-title__text {
        font-size: 60px;
        margin: 0
    }

    .cmp-two-columns-card {
        margin-bottom: 128px
    }

    .cmp-two-columns-card__media .cmp-video .spinner-video-spinner.progress-bar {
        width: 32px;
        height: 32px
    }

    .cmp-two-columns-card__buttons {
        margin-top: 34px;
        gap: 24px
    }

        .cmp-two-columns-card__buttons .mod__secondary-button .cmp-button, .cmp-two-columns-card__buttons .mod__light-secondary-button .cmp-button, .cmp-two-columns-card__buttons .mod__primary-button .cmp-button, .cmp-two-columns-card__buttons .mod__light-primary-button .cmp-button {
            padding: 16px 30px
        }

    .cmp-two-columns-card[data-aspect="ratio-1"] {
        gap: 174px
    }

        .cmp-two-columns-card[data-aspect="ratio-1"] .cmp-two-columns-card__media {
            width: 560px
        }

    .cmp-two-columns-card[data-aspect="ratio-9"] {
        padding: 0;
        gap: 293px
    }

        .cmp-two-columns-card[data-aspect="ratio-9"] .cmp-two-columns-card__media {
            width: 439px
        }

    .cmp-two-columns-card[data-aspect="ratio-16"] {
        gap: 118px
    }

        .cmp-two-columns-card[data-aspect="ratio-16"] .cmp-two-columns-card__media {
            width: 679px
        }
}
