.fabCarousel {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacer-arrow);
}

    .fabCarousel .fab-track .fab-card:first-child {
        margin-left: var(--gutter);
    }

    .fabCarousel .fab-viewport {
        width: 100%;
        clip-path: inset(-40px 0 -160px 0);
    }

    .fabCarousel .fab-track {
        display: flex;
        gap: 24px;
        will-change: transform;
        transition: transform 0.55s var(--ease);
    }

    .fabCarousel .fab-card {
        position: relative;
        flex: 0 0 322px;
        max-width: 322px;
        height: 320px;
        padding: 32px 24px;
        background: var(--bg-neutral-subtle);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 16px;
        text-decoration: none;
        color: inherit;
        /*cursor: pointer;*/
        transition: box-shadow var(--t-base) var(--ease);
    }

    .fabCarousel .fab-card__logo {
        height: 48px;
        width: auto;
    }

    .fabCarousel .fab-card__desc {
        font-weight: var(--fw-light);
        font-family: var(--font-tpSans-light);
        color: var(--body-default);
    }

    .fabCarousel .fab-card__arrow {
        position: absolute;
        right: 16px;
        top: 16px;
        width: 48px;
        height: 48px;
        color: var(--icon-brand-strong);
        opacity: 0;
        transform: rotate(-45deg);
        transition: opacity var(--t-base) var(--ease);
    }

        .fabCarousel .fab-card__arrow svg {
            width: 100%;
            height: 100%;
        }

    .fabCarousel .fab-card:hover .fab-card__arrow,
    .fabCarousel .fab-card:focus-visible .fab-card__arrow {
        opacity: 1;
    }

    .fabCarousel .fab-card:hover {
        box-shadow: 24px 24px 20px 0 rgba(0, 0, 0, 0.15), 68px 72px 61.1px 0 rgba(0, 0, 0, 0.16);
    }

    .fabCarousel .fab-action {
        display: flex;
        gap: 24px;
        align-items: center;
        justify-content: center;
        height: 56px;
        width: 100%;
    }

        .fabCarousel .fab-action.is-hidden {
            display: none;
        }

    .fabCarousel .fab-progress {
        position: relative;
        width: 581px;
        max-width: 46%;
        height: 1px;
        background: var(--bg-neutral-strong);
    }

    .fabCarousel .fab-progress__fill {
        position: absolute;
        left: 0;
        top: -1.5px;
        height: 4px;
        width: 40%;
        background: var(--bg-primary-strong);
        transition: width 0.45s var(--ease);
    }

    .fabCarousel .fab-btn {
        position: relative;
        z-index: 1;
    }

@media (min-width: 1400px) {
    /*.fabCarousel .fab-track {
        justify-content: center;
    }*/

    .fabCarousel .fab-track .fab-card:first-child {
        margin-left: 0;
    }
}

@media (max-width: 767px) {
    .fabCarousel .fab-progress {
        max-width: 40%;
    }
}

.fabCarousel-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    aspect-ratio: 16 / 9;
    mix-blend-mode: darken;
}
