.fRJTR {
  display: none;
}

.hiC_8 {
  margin-bottom: 32px;
}

.UErMX {
  min-height: 150px;
  display: block;
}

.dx_0v {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dx_0v div {
  height: 100%;
}

@media screen and (max-width: 1230px) {
  .UErMX {
    min-height: 100px;
  }
}
.HIBWV {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/**
 * Container components set their own width and max width using these
 * CSS Custom Properties because this pattern lets the full-bleed card align
 * the width of its contents to the with of other containers.
 */

@media (width < 768px) {
    .HIBWV {
        --page-layout-max-width: 100%;
        --page-layout-margin: var(--ndls-layout-space-4, 16px);
        --page-layout-padding-block: var(--ndls-layout-space-4, 16px);
    }
}

@media (width >= 768px) {
    .HIBWV {
        --page-layout-max-width: 1600px;
        --page-layout-margin: var(--ndls-layout-space-6, 32px);
        --page-layout-padding-block: var(--ndls-layout-space-5, 24px);
    }
}
.QOfWe {
    /* reused colors */
    --foreground-black: var(--ndls-color-foreground-default, #191A1B);
    --hero-blue: var(--ndls-color-brand-rack-primary, #186ADC);
    --dive-blue: #57CCF6;

    /* default text and button colors */
    --card-text-color: var(--ndls-color-foreground-default);
    --card-button-text-color: var(--ndls-color-foreground-inverse);
    --card-button-bg-color: var(--ndls-color-scale-gray-100);
    --card-button-bg-color-hover: var(--ndls-color-scale-gray-80);
    --card-button-bg-color-pressed: var(--ndls-color-scale-gray-90);
    --card-button-border-color: var(--ndls-color-scale-gray-100);
    --card-button-border-color-hover: var(--ndls-color-scale-gray-80);
    --card-button-border-color-pressed: var(--ndls-color-scale-gray-90);
}

/* inverse text and button colors overridden for certain background colors */
.l7x5O > :nth-child(3n + 1), 
.l7x5O > :nth-child(3n + 2), 
.vTEWS > :nth-child(3n + 1), 
.pe4DL > :nth-child(3n + 2), 
.pe4DL > :nth-child(3n) { /* foreground black */
    --card-text-color: var(--ndls-color-foreground-inverse);
    --card-button-text-color: var(--ndls-color-foreground-default);
    --card-button-bg-color: var(--ndls-color-action-secondary-resting);
    --card-button-bg-color-hover: var(--ndls-color-action-secondary-hover);
    --card-button-bg-color-pressed: var(--ndls-color-action-secondary-pressed);
    --card-button-border-color: var(--ndls-color-action-secondary-resting);
    --card-button-border-color-hover: var(--ndls-color-action-secondary-hover);
    --card-button-border-color-pressed: var(--ndls-color-action-secondary-pressed);
}

/* core_1 rotates between foreground black (inverse), rack blue (inverse), and dive blue */
.l7x5O > :nth-child(3n + 1) {
    /* text and button colors inversed above */
    --card-bg-color: var(--foreground-black);
}
.l7x5O > :nth-child(3n + 2) {
    /* text and button colors inversed above */
    --card-bg-color: var(--hero-blue);
}
.l7x5O > :nth-child(3n) {
    --card-bg-color: var(--dive-blue);
}

/* core_2 rotates between hero blue (inverse), dive blue, and sky blue */
.vTEWS > :nth-child(3n + 1) {
    --card-bg-color: var(--hero-blue);
}
.vTEWS > :nth-child(3n + 2) {
    --card-bg-color: var(--dive-blue);
}
.vTEWS > :nth-child(3n) {
    --card-bg-color: #BADAFB;
}

/* promo rotates between pink, red (inverse), and foreground black (inverse) */
.pe4DL > :nth-child(3n + 1) {
    --card-bg-color: #E69CEB;
}
.pe4DL > :nth-child(3n + 2) {
    /* text and button colors inversed above */
    --card-bg-color: #D82508;
}
.pe4DL > :nth-child(3n) {
    /* text and button colors inversed above */
    --card-bg-color: var(--foreground-black);
}

/* easter rotates between 2 colors*/
.PKE_P > :nth-child(odd) {
    --card-bg-color: #FF8772;
}
.PKE_P > :nth-child(even) {
    --card-bg-color: #FFC3B8;
}

/* mother's day rotates between 2 colors*/
.XjftG > :nth-child(odd) {
    --card-bg-color: #9678D3;
}
.XjftG > :nth-child(even) {
    --card-bg-color: #CABBE9;
}

/* father's day rotates between 2 colors */
._o1ZN > :nth-child(odd) {
    --card-bg-color: #3CDBC0;
}
._o1ZN > :nth-child(even) {
    --card-bg-color: #9DEDDF;
}

/* valentines rotates between 2 colors */
.L8I8p > :nth-child(odd) {
    --card-bg-color: #E45DBF;
}
.L8I8p > :nth-child(even) {
    --card-bg-color: #F1AEDF;
}

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


.GbM5V {
    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);
    --card-border-radius: var(--ndls-border-radius-container-small, 8px);
    --card-image-border-radius: var(--ndls-border-radius-container-small, 8px);

    /* 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;
}

.B5SEJ.i5wiS {
    --image-card-padding: var(--ndls-layout-space-5, 24px);
}

.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;
    }
}

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

.TWsDm {
    width: 100%;
}

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

.YIm4k {
    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);
}

.IeSBF {
    align-self: center;
    color: var(--ndls-color-foreground-inverse);
    color: var(--card-button-text-color, var(--ndls-color-foreground-inverse));
    background-color: var(--ndls-color-scale-gray-100);
    background-color: var(--card-button-bg-color, var(--ndls-color-scale-gray-100));
    border-color: var(--ndls-color-scale-gray-100);
    border-color: var(--card-button-border-color, var(--ndls-color-scale-gray-100));
}

.IeSBF:hover {
    background-color: var(--ndls-color-scale-gray-80);
    background-color: var(--card-button-bg-color-hover, var(--ndls-color-scale-gray-80));
    border-color: var(--ndls-color-scale-gray-80);
    border-color: var(--card-button-border-color-hover, var(--ndls-color-scale-gray-80));
}

.IeSBF:active {
    background-color: var(--ndls-color-scale-gray-90);
    background-color: var(--card-button-bg-color-pressed, var(--ndls-color-scale-gray-90));
    border-color: var(--ndls-color-scale-gray-90);
    border-color: var(--card-button-border-color-pressed, var(--ndls-color-scale-gray-90));
}

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

.ecXRr {
    display: inline-block;
    font-weight: bold;
    white-space: nowrap;
    align-self: center;
    color: var(--ndls-color-foreground-default);
    color: var(--card-text-color, var(--ndls-color-foreground-default));
    margin-left: 0;
}

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

.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(--card-bg-color, #F0F3F5);
    color: #191a1b;
    color: var(--card-text-color, #191a1b);
    gap: 32px;
    gap: var(--ndls-layout-space-6, 32px);
    border-radius: 0;
    border-radius: var(--card-border-radius, 0);
}

.Z9B8s {
    display: none;
}

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

.jqhH0 {
    /* set --web-svg-sprite-color to a different color to override default  */
    --web-svg-sprite-color: var(--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) {
    .KOnDN {
        flex-direction: row;
    }

    .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;
    }
}

.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 */
    background-color: "transparent";
    background-color: var(--card-bg-color, "transparent");
    color: #191a1b;
    color: var(--card-text-color, #191a1b);
    padding: 0px;
    padding: var(--image-card-padding, 0px);
}

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

.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 .pdWOO {
    transform: scale(1.04);
}

.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;
        }
    }
}

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

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

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

.MZ4TC {
    display: block;
    overflow: hidden;
    flex-grow: 0;
    box-sizing: border-box;
    width: 100%;
    border-radius: 8px;
    border-radius: var(--card-image-border-radius, 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;
}

.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(--card-bg-color, "transparent");
    color: #191a1b;
    color: var(--card-text-color, #191a1b);
    padding: 0px;
    padding: var(--image-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: 0px;
    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 .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;
    }
}

.M6JJL {
    container-type: inline-size;
    container-name: navigationRowMediaContainer;
    inline-size: 100%;
    max-inline-size: 1600px;
    max-inline-size: var(--page-layout-max-width, 1600px);
    position: relative;
}

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

    --number-of-children-visible: 2;
    --peek-allowance: 0.15;
    --number-of-gaps: calc(var(--number-of-children-visible) + 1);
    --gap-width: var(--ndls-layout-space-4, 16px);
    --card-image-border-radius: var(--ndls-border-radius-container-small, 8px);

    /* 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)));
}

.M6JJL:first-child > .egD9a {
    padding-block-start: 0;
}

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

.dqXQX {
    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;

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

.F3HmH {
    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;
}

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

.F3HmH > * {
    display: inline-block;
    position: relative;
    white-space: initial;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: var(--child-width);
    position: relative;
    height: auto;
    width: var(--child-width);
    scroll-margin-left: calc(var(--child-width) * var(--peek-allowance) + var(--gap-width));

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


}

@container navigationRowMediaContainer (width <= 414px) {
    .egD9a {
        --number-of-children-visible: 2;
    }

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

@container navigationRowMediaContainer (768px > width > 414px) {
    .egD9a {
        --number-of-children-visible: 3;
    }

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

@container navigationRowMediaContainer (width > 768px) {
    .egD9a {
        --gap-width: var(--ndls-layout-space-5, 24px);
        --number-of-children-visible: 6;
        --peek-allowance: 0.125;
    }

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


.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);
    }
}

.UjRRe {
    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);
    --card-border-radius: var(--ndls-border-radius-container-small, 8px);
}

.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);
    }
}

.kLYec {
    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);
    --card-border-radius: var(--ndls-border-radius-container-small, 8px);
    --card-image-border-radius: var(--ndls-border-radius-container-small, 8px);
}

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

.Ftrkv.kOU5a {
    --image-card-padding: 24px;
    --card-image-border-radius: 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);
    }
}

.qogdk {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 1600px;
    max-inline-size: var(--page-layout-max-width, 1600px);
    padding-inline: 32px;
    padding-inline: var(--page-layout-margin, 32px);

    /**
     * We only want to apply the top padding if the banner comes after another
     * container and only if it is successfully displaying third-party content.
     *
     * :not:(:first-child) indicates that the banner is not at the top
     * :has(iframe) indicates that a banner is displaying content
     */
    &:not(:first-child):has(iframe) {
        padding-block-start: 24px;
        padding-block-start: var(--page-layout-padding-block, 24px);
    }

    /* Edge to edge for MOW. Media query is the same as GAM Banner's */
    @media only screen and (max-width: 750px) {
        padding-inline: 0;
    }
}

.CUuJc {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 1600px;
    max-inline-size: var(--page-layout-max-width, 1600px);
    padding-inline: 32px;
    padding-inline: var(--page-layout-margin, 32px);

    /**
     * We only want to apply the top padding if the banner comes after another
     * container and only if it is successfully displaying third-party content.
     *
     * :not:(:first-child) indicates that the banner is not at the top
     * :has(iframe) indicates that a banner is displaying content
     */
    &:not(:first-child):has(iframe) {
        padding-block-start: 24px;
        padding-block-start: var(--page-layout-padding-block, 24px);
    }

    /* Edge to edge for MOW. Media query is the same as GAM Banner's */
    @media only screen and (max-width: 750px) {
        padding-inline: 0;
    }
}

.cpfWY {
    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;

    /* sets colors for buttons */
    --card-button-text-color: var(--ndls-color-foreground-default);
    --card-button-bg-color: var(--ndls-color-action-secondary-resting);
    --card-button-bg-color-hover: var(--ndls-color-action-secondary-hover);
    --card-button-bg-color-pressed: var(--ndls-color-action-secondary-pressed);
    --card-button-border-color: var(--ndls-color-foreground-default);
    --card-button-border-color-hover: var(--ndls-color-foreground-default);
}

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

    --number-of-children-visible: 1;
    --peek-allowance: 0.05;
    --number-of-gaps: calc(var(--number-of-children-visible) + 1);
    --gap-width: var(--ndls-layout-space-4, 16px);
    --card-image-border-radius: var(--ndls-border-radius-container-small, 8px);

    /* 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)));
}

.cpfWY:first-child > .doQK6 {
    padding-block-start: 0;
}

.EALjV {
    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: 16px;
    padding-inline: var(--ndls-layout-space-4, 16px);
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    display: flex;
    column-gap: var(--gap-width);
    align-items: flex-start;
}

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

.EALjV > * {
    display: inline-block;
    position: relative;
    white-space: initial;
    width: var(--child-width);
    scroll-margin-left: calc(var(--child-width) * var(--peek-allowance) + var(--gap-width));
    scroll-snap-align: start;
    scroll-snap-stop: always;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: var(--child-width);
    position: relative;
    height: auto;
}

/* stretch the card to fill the space if there's only 1 card */
.EALjV > :first-child:last-child {
    flex-grow: 1;
}

.NN4mQ {
    container-type: inline-size;
    container-name: heroCarouselDesktopMediaContainer;
    width: 100%;
    position: relative;

    /* sets colors for buttons */
    --card-button-text-color: var(--ndls-color-foreground-default);
    --card-button-bg-color: var(--ndls-color-action-secondary-resting);
    --card-button-bg-color-hover: var(--ndls-color-action-secondary-hover);
    --card-button-bg-color-pressed: var(--ndls-color-action-secondary-pressed);
    --card-button-border-color: transparent;
    --card-button-border-color-hover: transparent;
    --card-button-border-color-pressed: transparent;
}

.B2lVx {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: translateY(-50%);
    width: 100%;
    max-width: 1600px;
    z-index: 1;
    padding: 0 16px;
    box-sizing: border-box;
    pointer-events: none;
}

.B2lVx > button {
    pointer-events: auto;
}

.NN4mQ::after {
    content: '';
    width: 100%;
    height: 0;
    display: block;
    pointer-events: none;
    position: relative;
    background-color: rgba(25, 26, 27, 0.49);
    z-index: -1;
}

.CZt7j {
    position: absolute;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms ease-in;
}

.CZt7j.jAWPV {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 500ms ease-out;
}

@container heroCarouselDesktopMediaContainer (640px >= width) {
    .NN4mQ::after {
        padding-bottom: 120%;
    }
}

@container heroCarouselDesktopMediaContainer (1600px >= width > 640px) {
    .NN4mQ::after {
        padding-bottom: 50%;
    }
}

@container heroCarouselDesktopMediaContainer (width > 1600px) {
    .NN4mQ::after {
        padding-bottom: 37.5%;
    }
}

.umZDl {
  display: flex;
  width: 100%;
  height: 100%;
  max-inline-size: 1600px;
  max-inline-size: var(--page-layout-max-width, 1600px);
  padding-block: 24px;
  padding-block: var(--page-layout-padding-block, 24px);
  box-sizing: border-box;
  container-type: inline-size;
  container-name: videoCardMediaContainer;
  padding-inline: 0;

  @media (width >= 768px) {
    padding-inline: 32px;
    padding-inline: var(--page-layout-margin, 32px);
    padding-block: 24px;
    padding-block: var(--page-layout-padding-block, 24px);
  }
}

.umZDl:first-child {
  padding-block-start: 0;
}

.hCd9d {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: stretch;
  flex-direction: column;
  justify-content: stretch;
  row-gap: 12px;
  row-gap: var(--ndls-layout-space-3, 12px);
}

.UsGTu {
  height: 100%;
  position: relative;
}

.OLZzX {
  opacity: 0%;
}

.Uwi65 {
  display: block;
  width: 100%;
  height: 100%;
  object-position: 50% 50%;
  border: none;
  cursor: pointer;
}

.DX0l4 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.DX0l4 svg {
  pointer-events: none;
}

.Ygksx {
  display: flex;
  flex-direction: column;
  padding: 0 32px;
  padding: 0 var(--ndls-layout-space-6, 32px);
}

.CG8uC {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0;
  row-gap: 4px;
  row-gap: var(--ndls-layout-space-1, 4px);
  align-items: center;
  padding-bottom: 24px;
  padding-bottom: var(--ndls-layout-space-5, 24px);
  min-width: 280px;
  text-wrap: auto;
  text-wrap: balance;
}

.bvOIH {
  display: flex;
  justify-content: center;
  gap: 24px;
  gap: var(--ndls-layout-space-5, 24px);
  flex-grow: 0;
}

._9iGzZ {
  text-align: center;
}

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

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

@container videoCardMediaContainer (width > 875px) {
  .eyTo5 {
    font-weight: 700;
    font-weight: var(--ndls-font-weight-bold);
    font-size: nordstrom-creative-heading-m-font-size;
    line-height: nordstrom-creative-heading-m-line-height;

    .whcoX & {
      font-size: rack-creative-heading-m-font-size;
      line-height: rack-creative-heading-m-line-height;
    }
  }
}

.cw0aK {
    inline-size: 100%;
    max-inline-size: 1600px;
    max-inline-size: var(--page-layout-max-width, 1600px);
    padding-block: 24px;
    padding-block: var(--page-layout-padding-block, 24px);
    padding-inline: 32px;
    padding-inline: var(--page-layout-margin, 32px);
    box-sizing: border-box;
}

.cw0aK:first-child {
    padding-block-start: 0;
}