/* The vars in this file are temporary and one day will be part of DLS (I hope) */


.GbM5V {
    background-color: inherit;
    background-color: var(--themed-container-bg-color, inherit);
    color: inherit;
    color: var(--themed-container-text-color, inherit);
    container-type: inline-size;
    container-name: filmStripMediaContainer;
    inline-size: 100%;
    max-inline-size: 1600px;
    max-inline-size: var(--page-layout-max-width, 1600px);
    position: relative;
}

.B5SEJ {
    width: 100%;
    padding-block: 24px;
    padding-block: var(--page-layout-padding-block, 24px);

    --number-of-children-visible: 1;
    --peek-allowance: 0.15;
    --number-of-gaps: calc(var(--number-of-children-visible) + 1);
    --gap-width: var(--ndls-layout-space-5, 24px);

    /* calculate percent of container width based on desired number of children and scroll gap peek-a-boo */
    --child-width: calc((100cqw - var(--number-of-gaps) * var(--gap-width)) / (var(--number-of-children-visible) + 2 * var(--peek-allowance)));
}

.GbM5V:first-child > .B5SEJ {
    padding-block-start: 0;
}

.rLGMA {
    list-style-type: none;
    overflow-x: scroll;
    white-space: nowrap;
    padding-block-start: 16px;
    padding-block-start: var(--ndls-layout-space-4, 16px);
    padding-inline: 32px;
    padding-inline: var(--page-layout-margin, 32px);
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    display: flex;
    column-gap: var(--gap-width);
    align-items: flex-start;
}

.rLGMA::-webkit-scrollbar {
    display: none;
}

.hpPLN .rLGMA {
    align-items: stretch;
}

.xA_Cp {
    width: 100%;
    min-height: 40px;
    padding: 0 32px;
    padding: 0 var(--page-layout-margin, 32px);
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    justify-content: right;
}

.zpRW6 {
    flex-grow: 1;
    margin: 0;
    font-weight: 700;
    font-weight: var(--ndls-font-weight-bold);
    font-size: 2rem;
    line-height: 2.5rem;
    text-wrap: balance;

    .feZL9 & {
        font-size: 2.25rem;
        line-height: 2.75rem;
    }
}

.FgFzC {
    align-self: center;
    margin: 0 24px;
    margin: 0 var(--ndls-layout-space-5, 24px);
    white-space: nowrap;
}

.OyE4u {
    align-self: center;
    flex: none;

    &.A_70y {
        display: none;
    }
}

.OyE4u + .OyE4u {
    margin-left: 4px;
}

.rLGMA > * {
    display: inline-block;
    position: relative;
    white-space: initial;
    /** The minimum card size is 320, regardless of peed affordance desires */
    width: 320px;
    scroll-margin-left: calc(50cqw - 160px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 320px;
    position: relative;
    height: auto;
}

.fm0qa {
    opacity: 0.2;
}

.xA_Cp:has(.fm0qa + .fm0qa) .fm0qa {
    display: none;
}

@container filmStripMediaContainer (width > 414px) {
    .rLGMA > * {
        width: var(--child-width);
        scroll-margin-left: calc(var(--child-width) * var(--peek-allowance) + var(--gap-width));
        flex-basis: var(--child-width);
    }
}

/* using a ranged container query to make sure number of children targeting do not collide */
@container filmStripMediaContainer (1024px >= width > 768px) {
    .B5SEJ {
        --number-of-children-visible: 2;
        --peek-allowance: 0.125;
    }

    /* skip snap to every card except as specified below */
    .rLGMA > * {
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }

    /* snap to every other card */
    .rLGMA > :nth-of-type(odd) {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
}

@container filmStripMediaContainer (1600px >= width > 1024px) {
    .B5SEJ {
        --number-of-children-visible: 3;
        --peek-allowance: 0.125;
    }

    /* skip snap to every card except as specified below */
    .rLGMA > * {
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }

    /* snap to every 3rd card */
    .rLGMA > :nth-child(3n + 1) {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
}

@container filmStripMediaContainer (width > 1600px) {
    .B5SEJ {
        --number-of-children-visible: 4;
        --peek-allowance: 0.125;
    }

    /* skip snap to every card except as specified below */
    .rLGMA > * {
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }

    /* snap to every 4th card */
    .rLGMA > :nth-child(4n + 1) {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
}

.wNJR5 {
    display: block;
    width: 100%;
    container-type: inline-size;
    container-name: graphicCardMediaContainer;
    align-self: stretch;

    /* prevents nested portable text from adding additional margins */
    /* units (px) are intentionally included to allow calc with other variables */
    --portable-text-inline-margin: 0px;
}

.KOnDN {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 32px;
    padding: var(--ndls-layout-space-7, 40px) var(--ndls-layout-space-6, 32px);
    position: relative;
    box-sizing: border-box;
    height: 100%;
    width: 100%;

    /* color set and themed values */
    background-color: #F0F3F5;
    background-color: var(--themed-card-bg-color, #F0F3F5);
    color: #191a1b;
    color: var(--themed-card-text-color, #191a1b);
    gap: 32px;
    gap: var(--ndls-layout-space-6, 32px);
    border-radius: 8px;
    border-radius: var(--ndls-border-radius-container-small, 8px);

    &:has(.PREzk) {
        gap: 16px;
        gap: var(--ndls-layout-space-4, 16px);
    }
}

.Z9B8s,
.PREzk {
    display: none;
}

/* Only show the media link box if the graphic renders */
.Z9B8s:has(.vCBdl),
.PREzk:has(div) {
    display: block;
    max-width: 300px;
    flex-grow: 0;
    align-self: left;
    margin-right: auto;
}

.jqhH0 {
    /* set --web-svg-sprite-color to a different color to override default  */
    --web-svg-sprite-color: var(--themed-card-text-color, #191A1B);
}

.vCBdl {
    display: block;
    height: 96px;
    height: var(--ndls-size-illus-large, 96px);
}

.LA1ox {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    row-gap: 16px;
    row-gap: var(--ndls-layout-space-4, 16px);
}

.Hh3Is {
    display: block;
    flex-grow: 1;
}

.pomAY {
    flex-grow: 0;
}

.ngjx0 {
    display: none;
}

.z_Pd_ {
    font-size: 1.75rem;
    font-size: var(--ndls-text-heading-mobile-large-size);
    line-height: 2.25rem;
    line-height: var(--ndls-text-heading-mobile-large-height);
    text-wrap: balance;
}

@container imageCardMediaContainer (width > 482px) {
    .z_Pd_ {
        font-weight: 700;
        font-weight: var(--ndls-font-weight-bold);
        font-size: 2rem;
        line-height: 2.5rem;

        .SGyTh & {
            font-size: 2.25rem;
            line-height: 2.75rem;
        }
    }
}

@container graphicCardMediaContainer (width > 770px) {
    /* image or badge moves to the left unless it's a countdown badge */
    .KOnDN:not(:has(div[role="timer"])) {
        flex-direction: row;
        gap: 32px;
        gap: var(--ndls-layout-space-6, 32px);
    }

    .Hh3Is {
        display: block;
    }

    .Z9B8s {
        align-self: center;
    }

    .z_Pd_ {
        font-weight: 700;
        font-weight: var(--ndls-font-weight-bold);
        font-size: 2.5rem;
        line-height: 3rem;

        .SGyTh & {
            font-size: 3.75rem;
            line-height: 4.25rem;
        }
    }
}

@container graphicCardMediaContainer (width > 1028px) {
    .LA1ox {
        flex-direction: row;
    }

    .Hh3Is {
        align-self: center;
        flex-shrink: 1;
        padding-right: 24px;
        padding-right: var(--ndls-layout-space-5, 24px);
    }

    .pomAY {
        align-self: center;
        flex-shrink: 0;
    }
}

.hYeKC {
    display: flex;
    flex-wrap: wrap;
    column-gap: 12px;
    column-gap: var(--ndls-layout-space-3, 12px);
    row-gap: 12px;
    row-gap: var(--ndls-layout-space-3, 12px);
}

.QE6V5 {
    align-self: center;
    color: var(--ndls-color-foreground-inverse);
    color: var(--themed-card-button-text-color, var(--ndls-color-foreground-inverse));
    background-color: var(--ndls-color-action-primary-resting);
    background-color: var(--themed-card-button-bg-color, var(--ndls-color-action-primary-resting));
    border-color: var(--ndls-color-action-primary-resting);
    border-color: var(--themed-card-button-border-color, var(--ndls-color-action-primary-resting));
}

.QE6V5:hover {
    background-color: var(--ndls-color-action-primary-hover);
    background-color: var(--themed-card-button-bg-color-hover, var(--ndls-color-action-primary-hover));
    border-color: var(--ndls-color-action-primary-hover);
    border-color: var(--themed-card-button-border-color-hover, var(--ndls-color-action-primary-hover));
}

.QE6V5:active {
    background-color: var(--ndls-color-action-primary-pressed);
    background-color: var(--themed-card-button-bg-color-pressed, var(--ndls-color-action-primary-pressed));
    border-color: var(--ndls-color-action-primary-pressed);
    border-color: var(--themed-card-button-border-color-pressed, var(--ndls-color-action-primary-pressed));
}

.QE6V5.YbPpv {
    opacity: 0.2;
}

.Am2Cm {
    border: #838d91;
    border: var(--ndls-color-border-default);
}

.dvPFt {
    display: inline-block;
    font-weight: bold;
    white-space: nowrap;
    align-self: center;
    color: inherit;
    margin-left: 0;
}

.dvPFt:not(:first-child) {
    margin-left: 8px;
    margin-left: var(--ndls-layout-space-2, 8px);
}

.nHjYZ {
    font-weight: bold;
}

.TWsDm {
    width: 100%;
}

.ayRjc.ayRjc {
    background-color: #c4c4c4;
    aspect-ratio: 1;
    aspect-ratio: var(--image-aspect-ratio, 1);
}

.S4j32 {
    display: flex;
    width: 100%;
    container-type: inline-size;
    container-name: imageCardMediaContainer;

    /* prevents nested portable text from adding additional margins */
    /* units (px) are intentionally included to allow calc with other variables */
    --portable-text-inline-margin: 0px;
}

.kYq64 {
    position: relative;
    --image-aspect-ratio: 0.8;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    row-gap: 12px;
    box-sizing: border-box;
    height: 100%;
    width: 100%;

    /* color set and themed values */
    --fallback-bg-color: var(--themed-card-bg-color, var(--themed-container-bg-color));
    background-color: transparent;
    background-color: var(--fallback-bg-color, transparent);
    --fallback-text-color: var(--themed-card-text-color, var(--themed-container-text-color));
    color: var(--ndls-color-foreground-default);
    color: var(--fallback-text-color, var(--ndls-color-foreground-default));
    padding: 0px;
    padding: var(--themed-card-padding, 0px);
}

.qMlmN {
    display: block;
    overflow: hidden;
    flex-grow: 0;
    box-sizing: border-box;
    width: 100%;
    border-radius: var(--ndls-border-radius-image);
    border-radius: var(--themed-card-image-border-radius, var(--ndls-border-radius-image));
}

.pdWOO {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    transition: transform 250ms ease-out;
    aspect-ratio: var(--image-aspect-ratio);
}

.kYq64:hover .GnHEo .pdWOO {
    transform: scale(1.04);
}

.nz52M {
    position: absolute;
    z-index: 1;
    margin: 8px;
    margin: var(--ndls-layout-space-2, 8px);

    @container imageCardMediaContainer (width > 482px) {
        margin: 12px;
        margin: var(--ndls-layout-space-3, 12px);
    }
}

.S5h7s {
    display: block;
}

.Ks50U {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    row-gap: 16px;
    justify-content: space-between;
}

.n3lbx {
    flex-grow: 0;
}

/* Hide the secondary image by default */
.Ks50U + .qMlmN {
    display: none;
}

/* show only the primary image at 4:5 */
.pdWOO.xxJ4N {
    display: block;
}

.XLWim {
    font-size: 1.75rem;
    font-size: var(--ndls-text-heading-mobile-large-size);
    line-height: 2.25rem;
    line-height: var(--ndls-text-heading-mobile-large-height);
    text-wrap: balance;
}

.Rr0Sj {
    background-color: #c4c4c4;
    aspect-ratio: var(--image-aspect-ratio);
}

@container imageCardMediaContainer (width > 482px) {
    .kYq64 {
        flex-direction: row;
        justify-content: stretch;
        align-items: center;
        width: 100cqw;
    }

    .qMlmN {
        height: 100%;
        flex-grow: 1;
        flex-basis: 0;
    }

    .Ks50U {
        text-align: left;
        flex-grow: 1;
        flex-basis: 0;
    }

    .S5h7s,
    .n3lbx {
        padding: 0 32px;
    }

    .XLWim {
        font-weight: 700;
        font-weight: var(--ndls-font-weight-bold);
        font-size: 2rem;
        line-height: 2.5rem;

        .naCHD & {
            font-size: 2.25rem;
            line-height: 2.75rem;
        }
    }
}

@container imageCardMediaContainer (width > 875px) {

    /* Has Primary image only */
    .kYq64:not(:has(.qMlmN ~ .qMlmN)) {
        --image-aspect-ratio: 1.6;

        & .qMlmN {
            flex-grow: 2;
        }
    }

    .qMlmN {
        flex-grow: 2;
    }

    /* Has Primary and Secondary Image */
    .kYq64:has(.qMlmN ~ .qMlmN) {
        --image-aspect-ratio: 0.8;

        & .qMlmN {
            flex-grow: 1;
            display: block;
        }
    }

    /* show secondary image or larger 8:5 image */
    .Ks50U + .qMlmN,
    .pdWOO.PEqU6 {
        display: block;
    }

    /* hide the 4:5 image if an 8:5 image exists */
    .qMlmN:has(.pdWOO.PEqU6) .pdWOO.xxJ4N {
        display: none;
    }

    .XLWim {
        font-weight: 700;
        font-weight: var(--ndls-font-weight-bold);
        font-size: 2.5rem;
        line-height: 3rem;

        .naCHD & {
            font-size: 3.75rem;
            line-height: 4.25rem;
        }
    }
}

.O4Gts {
    container-type: inline-size;
    container-name: fullBleedCardMediaContainer;
    position: relative;
    width: 100%;
    --themed-card-text-color: var(--ndls-color-foreground-inverse);
    --themed-card-button-text-color: var(--ndls-color-foreground-default);
    --themed-card-button-bg-color: var(--ndls-color-action-secondary-resting);
    --themed-card-button-bg-color-hover: var(--ndls-color-action-secondary-hover);
    --themed-card-button-bg-color-pressed: var(--ndls-color-action-secondary-pressed);
    --themed-card-button-border-color: var(--ndls-color-action-secondary-resting);
    --themed-card-button-border-color-hover: var(--ndls-color-action-secondary-hover);
    --themed-card-button-border-color-pressed: var(--ndls-color-action-secondary-pressed);
}

.Aute_ {
    width: 100cqw;
    height: 120cqw;
    overflow: hidden;
}

.Aute_ + .Aute_ {
    display: none;
}

.eIq3p {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    display: none;
    aspect-ratio: var(--image-aspect-ratio);
}

/*
 * Gradient Overlay sits between the images and the copy to ensure there's a
 * sufficient contrast ratio.
 */
.heX0M {
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: end;
}

/*
 * Gradient Bottom
 * Spans the height of the copy
 */
.n4gLQ {
    position: relative;
    flex-grow: 0;

    /**
     * Color for the gradient overlay (scrim) that makes text legible
     */
    --scrim-color: rgba(25, 26, 27, 0.49);
    /**
     * The total gradient height is a multiple of the the height of the copy
     * section.
     */
    --scrim-multiple: 2.5;
    /**
     * The distance below the top of the copy to start fading out
     */
    /* --scrim-offset: 28px; */
    --scrim-offset: 2rem;
    /**
     * Dividing 100% by the multiple gives us access to the copy height
     */
    --scrim-copy-height: calc(100% / var(--scrim-multiple));
    --scrim-remaining-height: calc(100% - var(--scrim-copy-height));

    &::before {
        content: "";
        /*
         * The position is set to absolute to take the scrim out of the flow,
         * but no positioning is given to keep it anchored to its original
         * position at the top of the copy
         */
        position: absolute;
        height: calc(100% * var(--scrim-multiple));
        width: 100%;
        /*
         * Aligns the point between the copy-height and the remaining-height
         * with the top of the copy
         */
        transform: translateY(
            calc(-1 * var(--scrim-remaining-height))
        );
        background-image: linear-gradient(
            to top,
            /* Shade from the bottom to the top of the copy, minus a bit */
            var(--scrim-color) 0% calc(var(--scrim-copy-height) - var(--scrim-offset)),
            /* Then fade to transparent for the remaining gradient */
            transparent
        );
    }
}


.lYP6S {
    /* z-positioning */
    position: relative;

    /* Internal Text layout */
    color: #ffffff;
    color: var(--ndls-color-foreground-inverse);
    display: flex;
    flex-direction: column;
    gap: 12px;
    gap: var(--ndls-layout-space-3, 12px);

    /* Aligning text to other container contents */
    padding-block-start: 0;
    padding-block-end: 16px;
    padding-block-end: var(--ndls-layout-space-4, 16px);
    padding-inline: 32px;
    padding-inline: var(--page-layout-margin, 32px);
    max-inline-size: 1600px;
    max-inline-size: var(--page-layout-max-width, 1600px);
    margin: 0 auto;
    box-sizing: border-box;
}

/* Overlays the entire card to ensure it's clickable */
.p72FL {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.a0VNi {
    /* Ensure the button tray is above the link overlay so buttons are clickable */
    z-index: 2;
    /* Make the button tray only as big as needed to show the buttons */
    align-self: start;
}

.GET7E {
    font-weight: 700;
    font-weight: var(--ndls-font-weight-bold);
    font-size: 2.5rem;
    line-height: 3rem;
    text-wrap: balance;

    .Wlq3D & {
        font-size: 3.75rem;
        line-height: 4.25rem;
    }

    @container fullBleedCardMediaContainer (width >= 1024px) {
        font-size: 3.75rem;
        line-height: 4.25rem;

        .Wlq3D & {
            font-size: 4.5rem;
            line-height: 5rem;
        }
    }
}

@container fullBleedCardMediaContainer (640px >= width) {
    /* primary only at 5:6 */
    .Aute_ + .Aute_ {
        display: none;
    }

    .eIq3p.vjhwN {
        display: block;
        --image-aspect-ratio: 5 / 6;
    }
}

@container fullBleedCardMediaContainer (1600px >= width > 640px) {
    .gNMZU {
        display: flex;
    }

    .Aute_ {
        height: 50cqw;
    }

    /* show both images at 1:1 or one image at 2:1 */
    .Aute_ + .Aute_,
    .eIq3p.VSr1j,
    .eIq3p.FJELU {
        display: block;
    }

    .eIq3p.FJELU {
        --image-aspect-ratio: 2 / 1;
    }

    .eIq3p.VSr1j {
        --image-aspect-ratio: 1 / 1;
    }

    .lYP6S {
        padding-bottom: 32px;
        padding-bottom: var(--ndls-layout-space-6, 32px);
    }
}

@container fullBleedCardMediaContainer (width > 1600px) {
    .gNMZU {
        display: flex;
    }

    .Aute_ {
        height: 37.5cqw;
    }

    /* show both images at 4:3 or one image at 8:3 */
    .Aute_ + .Aute_,
    .eIq3p.etCb8,
    .eIq3p.cyG8d {
        display: block;
    }

    .Znvx7,
    .a0VNi {
        width: 1600px;
        margin: 0 auto;
    }

    .eIq3p.cyG8d {
        --image-aspect-ratio: 8 / 3;
    }

    .eIq3p.etCb8 {
        --image-aspect-ratio: 4 / 3;
    }
}

.UjRRe {
    background-color: var(--themed-container-bg-color);
    color: var(--themed-container-text-color);
    container-type: inline-size;
    container-name: fullWidthGrid;
    inline-size: 100%;
    max-inline-size: 1600px;
    max-inline-size: var(--page-layout-max-width, 1600px);
}

.WVysA {
    padding-block: 24px;
    padding-block: var(--page-layout-padding-block, 24px);
    padding-inline: 32px;
    padding-inline: var(--page-layout-margin, 32px);
}

.UjRRe:first-child > .WVysA {
    padding-block-start: 0;
}

.vJUAb {
    margin: 0 0 24px;
    margin: 0 0 var(--ndls-layout-space-5, 24px);
    font-weight: 700;
    font-weight: var(--ndls-font-weight-bold);
    font-size: 2rem;
    line-height: 2.5rem;
    text-wrap: balance;

    .kZHeH & {
        font-size: 2.25rem;
        line-height: 2.75rem;
    }
}

.HmukV {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 24px;
    column-gap: var(--ndls-layout-space-5, 24px);
    row-gap: 24px;
    row-gap: var(--ndls-layout-space-5, 24px);
}

/* using a ranged container query to make sure number of children targetting do not collide */
@container fullWidthGrid (952px >= width > 644px) {
    /* flex children take up half of the span, adjusted for gap */
    .HmukV > * {
        flex: 1 0 calc((100% - 24px) / 2);
        flex: 1 0 calc((100% - var(--ndls-layout-space-5, 24px)) / 2);
    }
}

@container fullWidthGrid (1256px >= width > 952px) {
    /* flex children take up a third of the span, adjusted for gap */
    .HmukV > * {
        flex: 1 0 calc((100% - (24px * 2)) / 3);
        flex: 1 0 calc((100% - (var(--ndls-layout-space-5, 24px) * 2)) / 3);
    }

    /* Targets last two children in sets where there would normally be a single child at the last row. */
    /* Flex children take up half of the span, adjusted for gap */
    .HmukV:has(> :nth-child(3n + 4):last-child) > :last-child,
    .HmukV:has(> :nth-child(3n + 4):last-child) > :nth-last-child(2) {
        flex: 1 0 calc((100% - 24px) / 2);
        flex: 1 0 calc((100% - var(--ndls-layout-space-5, 24px)) / 2);
    }
}

@container fullWidthGrid (1760px >= width > 1256px) {
    /* flex children take up quarter of the span, adjusted for gap */
    .HmukV > * {
        flex: 1 0 calc((100% - (24px * 3)) / 4);
        flex: 1 0 calc((100% - (var(--ndls-layout-space-5, 24px) * 3)) / 4);
    }

    /* Targets last two children in sets where there would normally be a single child at the last row. */
    /* Flex children take up half of the span, adjusted for gap */
    .HmukV:has(> :nth-child(4n + 5):last-child) > :last-child,
    .HmukV:has(> :nth-child(4n + 5):last-child) > :nth-last-child(2) {
        flex: 1 0 calc((100% - 24px) / 2);
        flex: 1 0 calc((100% - var(--ndls-layout-space-5, 24px)) / 2);
    }
}

@container fullWidthGrid (width > 1760px) {
    /* flex children take up a fifth of the span, adjusted for gap */
    .HmukV > * {
        flex: 1 0 calc((100% - 4 * 24px) / 5);
        flex: 1 0 calc((100% - 4 * var(--ndls-layout-space-5, 24px)) / 5);
    }

    /* Targets last two children in sets where there would normally be a single child at the last row. */
    /* Flex children take up half of the span, adjusted for gap */
    .HmukV:has(> :nth-child(5n + 6):last-child) > :last-child,
    .HmukV:has(> :nth-child(5n + 6):last-child) > :nth-last-child(2) {
        flex: 1 0 calc((100% - 24px) / 2);
        flex: 1 0 calc((100% - var(--ndls-layout-space-5, 24px)) / 2);
    }
}

.k5vBn {
    display: block;
    container-type: inline-size;
    container-name: navigationCardMediaContainer;
}

.x7cx6 {
    --image-aspect-ratio: 0.8;

    display: flex;
    flex-direction: column;
    justify-content: stretch;
    row-gap: 12px;
    row-gap: var(--ndls-layout-space-3, 12px);
    box-sizing: border-box;

    /* Theme-aware styles with fallbacks */
    --fallback-bg-color: var(--themed-card-bg-color, var(--themed-container-bg-color));
    background-color: transparent;
    background-color: var(--fallback-bg-color, transparent);
    --fallback-text-color: var(--themed-card-text-color, var(--themed-container-text-color));
    color: var(--ndls-color-foreground-default);
    color: var(--fallback-text-color, var(--ndls-color-foreground-default));
    padding: 0px;
    padding: var(--themed-card-padding, 0px);
}

.MZ4TC {
    display: block;
    overflow: hidden;
    flex-grow: 0;
    box-sizing: border-box;
    width: 100%;
    /* Use themed border radius with fallback to default */
    border-radius: var(--ndls-border-radius-image, 8px);
    border-radius: var(--themed-card-image-border-radius, var(--ndls-border-radius-image, 8px));
}

.uLfak {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    transition: transform 250ms ease-out;
    aspect-ratio: var(--image-aspect-ratio);
}

.x7cx6:hover .uLfak {
    transform: scale(1.04);
}

/* show only the primary image at 4:5 */
.uLfak.AeYiZ {
    display: block;
}

.IScLC {
    color: inherit;
}

.kLYec {
    background-color: var(--themed-container-bg-color);
    color: var(--themed-container-text-color);
    container-type: inline-size;
    container-name: fullWidthGrid;
    inline-size: 100%;
    max-inline-size: 1600px;
    max-inline-size: var(--page-layout-max-width, 1600px);
}

.Ftrkv {
    padding-block: 24px;
    padding-block: var(--page-layout-padding-block, 24px);
    padding-inline: 32px;
    padding-inline: var(--page-layout-margin, 32px);
}

.kLYec:first-child > .Ftrkv {
    padding-block-start: 0;
}

.Ftrkv:has(.jdixy > :nth-child(3)) {
    padding-block: 32px;
    padding-block: var(--ndls-layout-space-6, 32px);
}

.yWm0B {
    margin: 0 0 24px;
    margin: 0 0 var(--ndls-layout-space-5, 24px);
    font-weight: 700;
    font-weight: var(--ndls-font-weight-bold);
    font-size: 2rem;
    line-height: 2.5rem;
    text-wrap: balance;

    .SYy_X & {
      font-size: 2.25rem;
      line-height: 2.75rem;
    }
}

.jdixy {
    display: flex;
    flex-direction: column;
    column-gap: 24px;
    column-gap: var(--ndls-layout-space-5, 24px);
    row-gap: 60px;
}

@container fullWidthGrid (width > 633px) {
    .jdixy {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .kOU5a .jdixy {
        align-items: stretch;
    }

    /* single child should take up the whole row */
    .jdixy > :first-child:last-child {
        grid-column: span 2;
    }
}

@container fullWidthGrid (width > 889px) {
    /* with less than 4 children, the image cards should strech to fill the row */
    .jdixy {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }

    /* enforce grid wrapping when there's 4 or more images cards */
    .jdixy:has(> :nth-child(4)) {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
}

.mJCFW {
    display: flex;
    background-color: #f0f3f5;
    background-color: var(--ndls-color-background-subtle);
    justify-content: flex-start;
    padding: 16px;
    padding: var(--ndls-layout-space-4, 16px);
    gap: 24px;
    gap: var(--ndls-layout-space-5, 24px);
    margin-bottom: 32px;
    margin-bottom: var(--ndls-layout-space-6, 32px);
    align-items: center;
    container-type: inline-size;
    container-name: promoCardMediaContainer;
    border-radius: 4px;
    border-radius: var(--ndls-border-radius-40, 4px);
    margin-inline: 32px;
    margin-inline: var(--ndls-layout-space-6, 32px);
}

.Gw1dq {
    width: 50%;
    display: block;
}

.ZcMQQ {
    position: relative;
    --image-aspect-ratio: 0.8;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    row-gap: 8px;
    row-gap: var(--ndls-layout-space-2, 8px);
    box-sizing: border-box;
    height: 100%;
    width: 100%;

    /* color set and themed values */
    background-color: "transparent";
    background-color: var(--themed-card-bg-color, "transparent");
    color: #191a1b;
    color: var(--themed-card-text-color, #191a1b);
    padding: 0px;
    padding: var(--themed-card-padding, 0px);
}

.vbtDS {
    display: flex;
    align-items: center;
}

.vbtDS.DaXba {
    gap: 12px;
    gap: var(--ndls-layout-space-3, 12px);
}

.FDtgD {
    background: transparent;
    border: transparent;
}

.A5s61 {
    margin-top: 8px;
    margin-top: var(--ndls-layout-space-2, 8px);
}

.FDtgD {
    background: transparent;
    border: transparent;
}

._Vcez {
    display: block;
    overflow: hidden;
    flex-grow: 0;
    box-sizing: border-box;
    width: 100%;
    border-radius: 4px;
    border-radius: var(--ndls-border-radius-image, 4px);
}

.S73nk {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    transition: transform 250ms ease-out;
    aspect-ratio: var(--image-aspect-ratio);
}

.ZcMQQ:hover .JZOoQ .S73nk {
    transform: scale(1.04);
}

.ElDwf {
    display: block;
}

.AhZQX {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    row-gap: 16px;
    row-gap: var(--ndls-layout-space-4, 16px);
    justify-content: space-between;
}

.Ib8T1 {
    flex-grow: 0;
}

/* Hide the secondary image by default */
.AhZQX + ._Vcez {
    display: none;
}

/* show only the primary image at 4:5 */
.S73nk.l6oFY {
    display: block;
}

.FvUNn {
    font-size: 1.75rem;
    font-size: var(--ndls-text-heading-mobile-large-size);
    line-height: 2.25rem;
    line-height: var(--ndls-text-heading-mobile-large-height);
    text-wrap: balance;
}

.Vuxn_ {
    margin-bottom: 8px;
    margin-bottom: var(--ndls-layout-space-2, 8px);
}

@container promoCardMediaContainer (width > 482px) {
    .ZcMQQ {
        flex-direction: column;
        justify-content: stretch;
        align-items: flex-start;
        width: 100cqw;
    }

    ._Vcez {
        height: 100%;
        flex-grow: 1;
        flex-basis: 0;
    }

    .AhZQX {
        text-align: left;
        flex-grow: 1;
        flex-basis: 0;
    }

    .FvUNn {
        font-weight: 700;
        font-weight: var(--ndls-font-weight-bold);
        font-size: 2rem;
        line-height: 2.5rem;

        .nordstrom-rack & {
            font-size: 2.25rem;
            line-height: 2.75rem;
        }
    }
}

@container promoCardMediaContainer (width > 875px) {
    .ZcMQQ {
        width: 100%;
    }

    /* Has Primary image only */
    .ZcMQQ:not(:has(._Vcez ~ ._Vcez)) {
        --image-aspect-ratio: 1.6;

        & ._Vcez {
            flex-grow: 2;
        }
    }

    ._Vcez {
        flex-grow: 2;
    }

    /* hide the 4:5 image if an 8:5 image exists */
    ._Vcez:has(.S73nk.IJxHN) .S73nk.l6oFY {
        display: none;
    }

    .FvUNn {
        font-weight: 700;
        font-weight: var(--ndls-font-weight-bold);
        font-size: 2.5rem;
        line-height: 3rem;

        .nordstrom-rack & {
            font-size: 3.75rem;
            line-height: 4.25rem;
        }
    }
}

@container promoCardMediaContainer (width < 660px) {
    .vbtDS {
        align-items: center;
    }

    .Gw1dq {
        width: 100%;
    }
}

@media (max-width: 660px) {
    .mJCFW {
        flex-direction: column;
        margin-inline: 16px;
        margin-inline: var(--ndls-layout-space-4, 16px);
        padding-bottom: 24px;
        padding-bottom: var(--ndls-layout-space-5, 24px);
    }

    .ZcMQQ {
        gap: 8px;
        gap: var(--ndls-layout-space-2, 8px);
    }

    .Vuxn_ {
        margin-bottom: 8px;
        margin-bottom: var(--ndls-layout-space-2, 8px);
    }

    .A5s61 {
        margin-top: none;
    }
}

.GD9Q9 {
    background-color: #ffffff;
    background-color: var(--ndls-color-background-default);
    border: 1px solid rgba(25, 26, 27, 0.09);
    border: 1px solid var(--ndls-color-scale-gray-alpha-10);
    border-radius: 4px;
    border-radius: var(--ndls-border-radius-button);
    box-shadow: 0px 0px 0px 0px rgba(25, 26, 27, 0.15), 0px 0px 0px 0px rgba(25, 26, 27, 0.09);
    box-shadow: var(--ndls-elevation-level-0);
    color: #191a1b;
    color: var(--ndls-color-foreground-default);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 88px;
    height: 88px;
    padding: 12px;
    padding: var(--ndls-layout-space-3, 12px);

    @container (width <= 482px) {
        width: 64px;
        height: 64px;
        padding: 8px;
        padding: var(--ndls-layout-space-2, 8px);
    }
}

.ZGahv {
    font-weight: bold;

    .nM5vU & {
        font-size: 2rem;
        line-height: 2.5rem;
    }
    .JXKZ2 & {
        font-size: 2.25rem;
        line-height: 2.75rem;
    }

    @container (width <= 482px) {
        .K6i1T & {
            font-size: 1.5rem;
            font-size: var(--ndls-text-heading-desktop-medium-size);
            font-weight: 700;
            font-weight: var(--ndls-text-heading-desktop-medium-weight);
            letter-spacing: 0em;
            letter-spacing: var(--ndls-text-heading-desktop-medium-spacing);
            line-height: 2rem;
            line-height: var(--ndls-text-heading-desktop-medium-height);
        }

        .tdrjD & {
            font-size: 1.5rem;
            font-size: var(--ndls-text-heading-mobile-medium-size);
            font-weight: 700;
            font-weight: var(--ndls-text-heading-mobile-medium-weight);
            letter-spacing: 0em;
            letter-spacing: var(--ndls-text-heading-mobile-medium-spacing);
            line-height: 2rem;
            line-height: var(--ndls-text-heading-mobile-medium-height);
        }
    }
}

.kwxuw {
    .K6i1T & {
        font-size: 1.25rem;
        font-size: var(--ndls-text-heading-desktop-small-size);
        font-weight: 700;
        font-weight: var(--ndls-text-heading-desktop-small-weight);
        letter-spacing: 0em;
        letter-spacing: var(--ndls-text-heading-desktop-small-spacing);
        line-height: 1.75rem;
        line-height: var(--ndls-text-heading-desktop-small-height);
    }

    .tdrjD & {
        font-size: 1.25rem;
        font-size: var(--ndls-text-heading-mobile-small-size);
        font-weight: 700;
        font-weight: var(--ndls-text-heading-mobile-small-weight);
        letter-spacing: 0em;
        letter-spacing: var(--ndls-text-heading-mobile-small-spacing);
        line-height: 1.75rem;
        line-height: var(--ndls-text-heading-mobile-small-height);
    }

    @container (width <= 482px) {
        .K6i1T & {
            font-size: 0.875rem;
            font-size: var(--ndls-text-body-strong-desktop-small-size);
            font-weight: 700;
            font-weight: var(--ndls-text-body-strong-desktop-small-weight);
            letter-spacing: 0em;
            letter-spacing: var(--ndls-text-body-strong-desktop-small-spacing);
            line-height: 1.25rem;
            line-height: var(--ndls-text-body-strong-desktop-small-height);
        }

        .tdrjD & {
            font-size: 0.875rem;
            font-size: var(--ndls-text-body-strong-mobile-small-size);
            font-weight: 700;
            font-weight: var(--ndls-text-body-strong-mobile-small-weight);
            letter-spacing: 0em;
            letter-spacing: var(--ndls-text-body-strong-mobile-small-spacing);
            line-height: 1.25rem;
            line-height: var(--ndls-text-body-strong-mobile-small-height);
        }
    }
}
.uI74o {
    background-color: #fff4d1;
    background-color: var(--ndls-color-background-warning);
    border-radius: 4px;
    border-radius: var(--ndls-border-radius-input);
    box-shadow: 0px 0px 0px 0px rgba(25, 26, 27, 0.15), 0px 0px 0px 0px rgba(25, 26, 27, 0.09);
    box-shadow: var(--ndls-elevation-level-0);
    color: #191a1b;
    color: var(--ndls-color-foreground-default);
    box-sizing: border-box;
    padding: 8px;
    padding: var(--ndls-layout-space-2, 8px);

    &.oTPLT {
        font-size: 1.125rem;
        font-size: var(--ndls-text-body-strong-desktop-large-size);
        font-weight: 700;
        font-weight: var(--ndls-text-body-strong-desktop-large-weight);
        letter-spacing: 0em;
        letter-spacing: var(--ndls-text-body-strong-desktop-large-spacing);
        line-height: 1.75rem;
        line-height: var(--ndls-text-body-strong-desktop-large-height);
    }

    &.bTWvU {
        font-size: 1.125rem;
        font-size: var(--ndls-text-body-strong-mobile-large-size);
        font-weight: 700;
        font-weight: var(--ndls-text-body-strong-mobile-large-weight);
        letter-spacing: 0em;
        letter-spacing: var(--ndls-text-body-strong-mobile-large-spacing);
        line-height: 1.75rem;
        line-height: var(--ndls-text-body-strong-mobile-large-height);
    }

    @container (width <= 482px) {
        padding-block: 4px;
        padding-block: var(--ndls-layout-space-1, 4px);

        &.oTPLT {
            font-size: 0.875rem;
            font-size: var(--ndls-text-body-strong-desktop-small-size);
            font-weight: 700;
            font-weight: var(--ndls-text-body-strong-desktop-small-weight);
            letter-spacing: 0em;
            letter-spacing: var(--ndls-text-body-strong-desktop-small-spacing);
            line-height: 1.25rem;
            line-height: var(--ndls-text-body-strong-desktop-small-height);
        }

        &.bTWvU {
            font-size: 0.875rem;
            font-size: var(--ndls-text-body-strong-mobile-small-size);
            font-weight: 700;
            font-weight: var(--ndls-text-body-strong-mobile-small-weight);
            letter-spacing: 0em;
            letter-spacing: var(--ndls-text-body-strong-mobile-small-spacing);
            line-height: 1.25rem;
            line-height: var(--ndls-text-body-strong-mobile-small-height);
        }
    }
}

.iYyA2 {
    font-size: 2rem;
    line-height: 2.5rem;
    max-width: 70ch;
    padding-inline: var(--portable-text-inline-margin);
    padding-block: 32px 4px;
    padding-block: var(--ndls-layout-space-6) var(--ndls-layout-space-1);

    &.CWUpP {
        font-size: 2.25rem;
        line-height: 2.75rem;
    }
}

.QqfAk {
    font-size: 1.5rem;
    font-size: var(--ndls-text-heading-mobile-medium-size);
    line-height: 2rem;
    line-height: var(--ndls-text-heading-mobile-medium-height);
    max-width: 70ch;
    padding-inline: var(--portable-text-inline-margin);
    padding-block: 16px 4px;
    padding-block: var(--ndls-layout-space-4) var(--ndls-layout-space-1);
}

.brSJi {
    font-size: 1.25rem;
    font-size: var(--ndls-text-heading-mobile-small-size);
    line-height: 1.75rem;
    line-height: var(--ndls-text-heading-mobile-small-height);
    max-width: 70ch;
    padding-inline: var(--portable-text-inline-margin);
    padding-block: 8px 4px;
    padding-block: var(--ndls-layout-space-2) var(--ndls-layout-space-1);
}

.eYiz3 {
    font-size: 1rem;
    font-size: var(--ndls-text-heading-mobile-xsmall-size);
    line-height: 1.5rem;
    line-height: var(--ndls-text-heading-mobile-xsmall-height);
    max-width: 70ch;
    padding-inline: var(--portable-text-inline-margin);
    padding-block: 8px 4px;
    padding-block: var(--ndls-layout-space-2) var(--ndls-layout-space-1);
}

/*
    TODO: Apply correct list styles
    For now the list styles will share "normal" will need UX feedback
*/
.WaUnB, .A4tK9 {
    font-size: 1rem;
    font-size: var(--ndls-text-body-mobile-medium-size);
    line-height: 1.5rem;
    line-height: var(--ndls-text-body-mobile-medium-height);
    padding-block: 0px 16px;
    padding-block: var(--ndls-layout-space-0) var(--ndls-layout-space-4);
    max-width: 70ch;
    margin: 0;
}

.WaUnB {
    padding-inline: var(--portable-text-inline-margin);
}

.A4tK9 {
    padding-inline-start: calc(24px + var(--portable-text-inline-margin));
    padding-inline-start: calc(var(--ndls-layout-space-5) + var(--portable-text-inline-margin));
}

/* Nested lists don't need the extra padding */
.A4tK9 .A4tK9 {
    padding-inline-start: 24px;
    padding-inline-start: var(--ndls-layout-space-5);
}

.SjCZX {
    font-size: inherit;
    line-height: inherit;
    word-wrap: break-word;
}

.fMobl {
    display: flex;
    gap: 12px;
    gap: var(--ndls-layout-space-3);
    max-width: 70ch;
    padding-inline: var(--portable-text-inline-margin);
    padding-block: 4px 24px;
    padding-block: var(--ndls-layout-space-1) var(--ndls-layout-space-5);
}

/* this breakpoint is defined by UX as the mobile / desktop switch */
@media only screen and (min-width: 768px) {
    .iYyA2 {
        padding-block: 32px 4px;
        padding-block: var(--ndls-layout-space-6) var(--ndls-layout-space-1);
    }

    .QqfAk {
        font-size: 1.75rem;
        font-size: var(--ndls-text-heading-desktop-large-size);
        line-height: 2.25rem;
        line-height: var(--ndls-text-heading-desktop-large-height);
        padding-block: 16px 4px;
        padding-block: var(--ndls-layout-space-4) var(--ndls-layout-space-1);
    }

    .brSJi {
        font-size: 1.5rem;
        font-size: var(--ndls-text-heading-desktop-medium-size);
        line-height: 2rem;
        line-height: var(--ndls-text-heading-desktop-medium-height);
        padding-block: 8px 4px;
        padding-block: var(--ndls-layout-space-2) var(--ndls-layout-space-1);
    }

    .eYiz3 {
        font-size: 1.25rem;
        font-size: var(--ndls-text-heading-desktop-small-size);
        line-height: 1.75rem;
        line-height: var(--ndls-text-heading-desktop-small-height);
        padding-block: 8px 4px;
        padding-block: var(--ndls-layout-space-2) var(--ndls-layout-space-1);
    }

    .WaUnB, .A4tK9 {
        font-size: var(--ndls-text-body-medium-large-size);
        line-height: var(--ndls-text-body-medium-large-height);
        padding-block: 0px 16px;
        padding-block: var(--ndls-layout-space-0) var(--ndls-layout-space-4);
    }

    .fMobl {
        gap: 16px;
        gap: var(--ndls-layout-space-4);
        padding-block: 4px 24px;
        padding-block: var(--ndls-layout-space-1) var(--ndls-layout-space-5);
    }
}