.hover-cards {
    --hcard-min: 200px;
    --hcard-max: 700px;
}

    .hover-cards .tpc__slide {
        flex: 0 0 322px;
    }

    /* ---------- card ---------- */
    .hover-cards .hcard {
        width: 100%;
        position: relative;
        overflow: hidden;
        isolation: isolate;
        height: var(--hcard-h, var(--hcard-min));
        padding: 24px;
        background: var(--hcard-bg);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /*cursor: pointer;*/
    }

    .hover-cards .hcard__icon {
        position: relative;
        z-index: 2;
        flex: none;
        width: 32px;
        height: 32px;
        color: var(--title-inverse);
    }

        .hover-cards .hcard__icon svg {
            display: block;
            width: 100%;
            height: 100%;
        }

    .hover-cards .hcard__label {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .hover-cards .hcard__eyebrow {
        margin: 0;
        font-family: var(--font-tpSans-medium);
        font-weight: var(--fw-medium);
        text-transform: uppercase;
        color: var(--title-neutral);
    }

    .hover-cards .hcard__title {
        margin: 0;
        font-family: var(--font-tpSans-exLight);
        font-weight: var(--fw-extralight);
        color: var(--title-inverse);
    }

    .hover-cards .hcard__panel {
        position: absolute;
        inset: 0;
        z-index: 3;
        background: var(--bg-primary-subtle);
        padding: 24px;
        transform: translateX(-107%);
        transition: transform 700ms var(--ease);
    }

    .hover-cards .hcard__list {
        list-style: none;
        margin: 0;
        padding: 0;
        height: 100%;
        /*padding-right: 20px;*/
    }

    .hover-cards .hcard__list--bullets {
        list-style: disc;
        padding-left: 20px;
    }

    .hover-cards .hcard__line {
        margin: 0;
        font-family: var(--font-tpSans-light);
        font-weight: var(--fw-light);
        color: var(--body-default);
        transform: translateX(var(--off, 0));
        transition: transform var(--t-base) var(--ease);
    }

        .hover-cards .hcard__line:nth-child(1) {
            --off: -40px;
        }

        .hover-cards .hcard__line:nth-child(2) {
            --off: -72px;
        }

        .hover-cards .hcard__line:nth-child(3) {
            --off: -104px;
        }

        .hover-cards .hcard__line:nth-child(4) {
            --off: -160px;
        }

        .hover-cards .hcard__line:nth-child(5) {
            --off: -216px;
        }

        .hover-cards .hcard__line + .hcard__line {
            /*margin-top: 12px;*/
            padding-top: 12px;
        }

    .hover-cards .hcard:hover .hcard__line,
    .hover-cards .hcard:focus-within .hcard__line,
    .hover-cards .hcard.is-open .hcard__line,
    .hover-cards .hcard.is-preview .hcard__line {
        --off: 0px;
    }

    .hover-cards .hcard--static {
        cursor: default;
    }

    .hover-cards.hc-reveal .tpc__viewport {
        padding-bottom: 40px;
        margin-bottom: -40px;
    }

    .hover-cards.hc-reveal .hcard {
        opacity: 0;
    }

    .hover-cards.hc-reveal.hc-in .hcard {
        animation: hcRiseIn 837ms cubic-bezier(0.41, 0, 0.08, 1) both;
        animation-delay: calc(150ms + var(--hc-i, 0) * 150ms);
    }

    .hover-cards .hover-cards-textHover {
        color: #FFFFFF;
        font-family: 'Tp Sans Light';
        opacity: 0.5;
    }

    .hover-cards div:has(.hover-cards-textHover) svg {
        opacity: 0.5;
    }

    .hover-cards .hcard__panel-close {
        color: black;
        position: absolute;
        right: 11px;
        top: 3px;
        font-size: 21px;
    }

    .hover-cards .hcard.is-preview .hcard__panel {
        transform: translateX(0);
    }

    .hover-cards .hcard.is-hover .hcard__panel {
        transform: translateX(0);
    }

    .hover-cards .hcard.is-hover .hcard__line {
        --off: 0px;
    }

@media (min-width: 992px) {
    .hover-cards .hcard:hover .hcard__panel,
    .hover-cards .hcard:focus-within .hcard__panel,
    .hover-cards .hcard.is-open .hcard__panel {
        transform: translateX(0);
    }
}

.hover-cards .hcard.is-closed .hcard__panel {
    transform: translateX(-107%) !important;
}

.hover-cards .hcard.is-open .hcard__panel {
    transform: translateX(0);
}

@keyframes hcRiseIn {
    from {
        opacity: 0;
        translate: 0 40px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (max-width: 767px) {
    .hover-cards .hover-cards {
        padding: 80px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hover-cards .hcard__panel,
    .hover-cards .hcard__line {
        transition: none;
    }

    .hover-cards.hc-reveal .hcard,
    .hover-cards.hc-reveal.hc-in .hcard {
        opacity: 1;
        animation: none;
    }

    .hover-cards.hc-reveal .tpc__viewport {
        padding-bottom: 0;
        margin-bottom: 0;
    }
}