/* -- Wide flyout with CTA card ------------------------------- */

@media screen and (min-width: 1280px) {
    .nv:has(.fly-wd) {
        position: static;
        --flx-gap: 5.8rem;
    }
    /* Make li static so the flyout anchors to the nav (which has position: relative) */
    .nv li:has(.fly-wd) {
        position: static;
    }

    .fly-nv.fly-wd {
        max-width: none;
        min-width: 0;
        width: var(--vw_);
        overflow-y: visible;
        border-radius: 0 0 1rem 1rem;
        left: calc(-1 * (var(--shf-off-a) / 2) - 1px);
        right: 0;
        top: 100%;
        transform: none;
        background-color: var(--background);
    }
}

.fly-nv.fly-wd {
   

    .fly-wd-links {
        @media screen and (min-width: 1500px) {
            
            width: calc(75% - (var(--flx-gap) / 2));
        }
        column-gap: var(--flx-gap);
        --itm-w: calc( var(--itm-val) * 1% - ( var(--flx-gap) * ( (100 - var(--itm-val)) * .01 ) ) );
    }

    .fly-wd-cta {
        @media screen and (min-width: 1500px) {
        width: calc(25% - (var(--flx-gap) / 2));
        }
    }

    .fly-wd-cta-img {
        border-radius: 1rem 1rem 0 0;
        aspect-ratio: 3 / 1;
        object-fit: cover;
        width: 100%;
        display: block;
    }
}