.hover-cards {
}

    .hover-cards .hover-cards__carousel {
        display: flex;
        flex-direction: column;
        gap: 24px;
        margin-right: calc(-1 * var(--gutter));
    }

    /* ---------- card ---------- */
    .hover-cards .hcard {
        position: relative;
        flex: 1 0 322px;
        overflow: hidden;
        isolation: isolate;
        height: 400px;
        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-sans);
        font-weight: var(--fw-medium);
        text-transform: uppercase;
        color: var(--title-neutral);
    }

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

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

    .hover-cards .hcard__list {
        list-style: none;
        margin: 0;
        padding: 0;
        overflow-y: auto;
        height: 100%;
        place-content: center;
        padding-right: 20px;
    }

    .hover-cards .hcard__line {
        margin: 0;
        font-family: var(--font-sans);
        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;
            border-top: 1px solid var(--bg-neutral-medium);
        }

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

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

    .hover-cards.hc-reveal .ins-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;
    }

@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 .ins-viewport {
        padding-bottom: 0;
        margin-bottom: 0;
    }
}