.carousel-highlights {
    --ch-card-w: 1152px;
    --ch-card-h: 568px;
    --ch-gap: 24px;
    --ch-side: 0.6;
    --ch-off: calc(var(--ch-card-w) / 2 + var(--ch-gap) + var(--ch-card-w) * var(--ch-side) / 2);
    --ch-off2: calc(var(--ch-card-w) * var(--ch-side) + var(--ch-gap));
    overflow: hidden;
}

    .carousel-highlights .ch-inner {
        margin-inline: auto;
    }

    .carousel-highlights .ch-heading {
        margin: 0 0 64px var(--gutter);
        font-family: var(--font-tpSans-exLight);
        font-weight: var(--fw-extralight);
        font-size: var(--fs-56);
        line-height: var(--lh-56);
        letter-spacing: 0;
        color: var(--title-default);
    }

    .carousel-highlights .tag {
        display: inline-flex;
        align-items: center;
        height: 24px;
        padding: 4px 8px;
        background: var(--bg-primary-subtle);
        color: var(--title-primary-strong);
        font-weight: var(--fw-medium);
        font-family: var(--font-tpSans-medium);
        letter-spacing: -0.14px;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .carousel-highlights .ch-carousel {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .carousel-highlights .ch-viewport {
        position: relative;
        width: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .carousel-highlights .ch-track {
        position: relative;
        height: var(--ch-card-h);
    }

    .carousel-highlights .ch-card {
        position: absolute;
        left: 50%;
        top: 0;
        width: var(--ch-card-w);
        height: var(--ch-card-h);
        display: flex;
        align-items: center;
        gap: 32px;
        padding: 32px;
        background: var(--bg-default);
        transition: transform 0.55s var(--ease), opacity 0.55s var(--ease);
        will-change: transform;
    }

    .carousel-highlights .ch-card--snap {
        transition: none !important;
    }

    .carousel-highlights .ch-card[data-pos="0"] {
        transform: translateX(-50%) scale(1);
        opacity: 1;
        z-index: 3;
    }

    .carousel-highlights .ch-card[data-pos="1"] {
        transform: translateX(calc(-50% + var(--ch-off))) scale(.6);
        opacity: 1;
        z-index: 2;
    }

    .carousel-highlights .ch-card[data-pos="-1"] {
        transform: translateX(calc(-50% - var(--ch-off))) scale(.6);
        opacity: 1;
        z-index: 2;
    }

    .carousel-highlights .ch-card[data-pos="2"] {
        transform: translateX(calc(-50% + var(--ch-off2))) scale(.6);
        opacity: 0;
    }

    .carousel-highlights .ch-card[data-pos="-2"] {
        transform: translateX(calc(-50% - var(--ch-off2))) scale(.6);
        opacity: 0;
    }

    .carousel-highlights .ch-card__media {
        position: relative;
        flex: none;
        width: 552px;
        height: 504px;
        background: #e7eef8;
        overflow: hidden;
    }

    .carousel-highlights .ch-card__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .carousel-highlights .ch-card__logo {
        position: absolute;
        left: 34px;
        bottom: 28px;
        width: 86px;
        height: 98px;
        object-fit: contain;
        mix-blend-mode: darken;
    }

    .carousel-highlights .ch-card__body {
        flex: 1 1 auto;
        min-width: 0;
        height: 504px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .carousel-highlights .ch-card__top {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .carousel-highlights .ch-card__tags {
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .carousel-highlights .ch-tag--outline {
        background: transparent;
        color: var(--body-default);
        /*border: 1px solid var(--bg-neutral-medium);*/
    }

    .carousel-highlights .ch-card__category {
        font-family: var(--font-tpSans-exLight);
        font-weight: var(--fw-extralight);
        color: var(--body-default);
    }

    .carousel-highlights .ch-card__title {
        font-family: var(--font-tpSans-exLight);
        font-weight: var(--fw-extralight);
        letter-spacing: 0;
        color: var(--title-default);
    }

    .carousel-highlights .ch-card__desc {
        font-family: var(--font-tpSans-light);
        font-weight: var(--fw-light);
        color: var(--body-default);
    }

    .carousel-highlights .ch-card__cta {
        align-self: flex-start;
    }

    .carousel-highlights .ch-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
        width: 50%;
        margin: 0 auto;
    }

        .carousel-highlights .ch-actions .tpc__progress {
            display: block;
            position: relative;
            flex: 1 1 0;
            min-width: 0;
            height: 4px;
        }

        .carousel-highlights .ch-actions .tpc__progress {
            position: relative;
            display: block;
            flex: 1 1 0;
            min-width: 0;
            height: 4px;
        }

            .carousel-highlights .ch-actions .tpc__progress::before {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                top: 50%;
                height: 1px;
                transform: translateY(-50%);
                background: var(--bg-neutral-strong);
            }

            .carousel-highlights .ch-actions .tpc__progress .tpc__progress-fill {
                position: absolute;
                left: 0;
                top: 0;
                height: 4px;
                width: var(--tpc-progress, 40%);
                background: var(--bg-primary-strong);
                transition: width 600ms var(--ease);
            }

    .carousel-highlights .tp-btn {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 56px;
        width: 154px;
        background: var(--bg-primary-strong);
        color: var(--title-inverse);
        font-size: var(--fs-18);
        line-height: var(--lh-24);
        font-weight: var(--fw-light);
        isolation: isolate;
        font-family: var(--font-tpSans-light);
        cursor: pointer;
        text-decoration: none;
    }

        .carousel-highlights .tp-btn > * {
            position: relative;
            z-index: 2;
        }

    .carousel-highlights .tp-btn__accent {
        position: absolute;
        inset: 0;
        background: var(--bg-secondary-strong);
        transform: scaleX(0);
        transform-origin: left center;
        z-index: 1;
        transition: transform var(--t-base) var(--ease);
    }

    .carousel-highlights .tp-btn:hover .tp-btn__accent,
    .carousel-highlights .tp-btn:focus-visible .tp-btn__accent {
        transform: scaleX(1);
    }

    .carousel-highlights .tp-btn__icon {
        width: 24px;
        height: 24px;
        flex: none;
        transition: transform var(--t-base) var(--ease);
    }

        .carousel-highlights .tp-btn__icon svg {
            width: 100%;
            height: 100%;
            display: block;
        }

    .carousel-highlights .tp-btn:hover .tp-btn__icon,
    .carousel-highlights .tp-btn:focus-visible .tp-btn__icon {
        transform: rotate(-45deg);
    }

@media (max-width:1300px) {
    .carousel-highlights .ch-card {
        width: 100%;
    }
}

@media (max-width: 1024px) {

    .carousel-highlights .ch-track {
        height: auto;
    }

    .carousel-highlights {
        padding: 40px 0;
    }

        .carousel-highlights .ch-inner {
            max-width: none;
            padding-inline: var(--gutter);
        }

        .carousel-highlights .ch-heading {
            margin: 0 0 24px;
            font-size: 48px;
            line-height: 56px;
            font-weight: var(--fw-ultralight);
            font-family: var(--font-tpSans-ultraLight);
        }

        .carousel-highlights .ch-carousel {
            gap: 32px;
        }

        .carousel-highlights .ch-viewport {
            height: auto;
        }

        .carousel-highlights .ch-card {
            position: absolute;
            left: 0;
            width: 100%;
            height: auto;
            padding: 20px;
            gap: 7px;
            transition: opacity 0.3s var(--ease);
        }

            .carousel-highlights .ch-card[data-pos="0"] {
                position: relative;
                transform: none;
                opacity: 1;
                z-index: 1;
            }

            .carousel-highlights .ch-card:not([data-pos="0"]) {
                transform: none;
                opacity: 0;
                pointer-events: none;
                z-index: 0;
            }

        .carousel-highlights .ch-card__media {
            width: 48%;
            max-width: 334px;
            height: auto;
            aspect-ratio: 334 / 306;
        }

        .carousel-highlights .ch-card__logo {
            left: 20px;
            bottom: 20px;
            width: 52px;
            height: 60px;
        }

        .carousel-highlights .ch-card__body {
            height: auto;
            align-self: stretch;
            gap: 24px;
            padding: 12px 20px;
        }

        .carousel-highlights .ch-card__desc {
            display: none;
        }
}

@media (max-width:991px) {
    .carousel-highlights .ch-actions .tpc__progress {
        display: none;
    }
}

@media (max-width: 767px) {
    .carousel-highlights {
        padding: 80px 0;
    }

        .carousel-highlights .ch-inner {
            padding-inline: var(--gutter);
        }

        .carousel-highlights .ch-heading {
            margin: 0 0 24px;
            font-size: 40px;
            line-height: 40px;
            white-space: nowrap;
        }

        .carousel-highlights .ch-carousel {
            gap: 24px;
        }

        .carousel-highlights .ch-card {
            flex-direction: column;
            align-items: stretch;
            gap: 24px;
            padding: 0 0 24px;
            border-radius: 8px;
            overflow: hidden;
        }

        .carousel-highlights .ch-card__media {
            width: 100%;
            max-width: none;
            aspect-ratio: 320 / 165;
            border: 0;
            border-radius: 8px 8px 0 0;
        }

        .carousel-highlights .ch-card__logo {
            left: 20px;
            bottom: auto;
            top: 63px;
            width: 52px;
            height: 60px;
        }

        .carousel-highlights .ch-card__body {
            padding: 0 24px 0 20px;
            gap: 24px;
        }

        .carousel-highlights .ch-card__tags,
        .carousel-highlights .ch-card__category {
            display: none;
        }

        .carousel-highlights .ch-card__top {
            gap: 0;
        }
}

@media (prefers-reduced-motion: reduce) {
    .carousel-highlights .ch-card {
        transition: none !important;
    }

    .carousel-highlights .tp-btn__accent,
    .carousel-highlights .tp-btn__icon,
    .carousel-highlights .tpc__arrow-accent {
        transition: none !important;
    }
}