.catbnr-underwear { display: grid; gap: var(--gutter-xs) } .catbnr-underwear>div { min-height: 0; min-width: 0 } .columns-scroll-wrapper { grid-area: 1/1/1/1; background: var(--clr-white); } .catbnr-underwear .columns-scroll { padding: 0; gap: var(--gutter-xs); align-items: stretch; overflow-y: hidden; background: var(--clr-white); } .catbnr-underwear .columns-scroll>div { min-width: 42% } .catbnr-underwear .columns-scroll > div > a { display: grid; max-height: 6.5lh; overflow: hidden; } .catbnr-underwear .columns-scroll a > div { grid-area: 1/1; /* place-content: end; // max-height: 15rem; // overflow: hidden; */ } .catbnr-underwear .columns-scroll > div .copy-wrapper { display: none; } .catbnr-underwear .columns-scroll > div a .copy-wrapper { display: flex; max-height: 6.5lh; justify-content: center; align-items: flex-end; } .catbnr-underwear .columns-scroll :is(picture,img) { height: 100%; object-fit: cover; } .catbnr-underwear .promo-wrapper { width: 100%; height: 100%; grid-area: 2/1/2/1; display: flex; justify-content: center; align-items: center; background: #BCB8DD; } .catbnr-underwear .promo-wrapper .promo>div { display: flex; justify-content: center; align-items: center } .catbnr-underwear .promo-wrapper .promo>div>div { text-align: center; font-family: var(--heading-font-family); font-weight: var(--fw-bold); line-height: .89; font-size: clamp(2.4rem, 2.4rem + 1vw, 4rem); color: var(--clr-brand-indigo); padding: 1lh var(--gutter-s); ););););} .catbnr-underwear .promo-wrapper .promo>div>div strong { font-size: 175%; } .catbnr-underwear .promo-wrapper .promo>div>div strong:has(sup) { font-size: 105%; font-weight: var(--fw-medium); } .catbnr-underwear .promo-wrapper .promo>div>div strong sup { vertical-align: middle; } .catbnr-underwear>div .columns-scroll .copy-wrapper { padding: var(--gutter-s); } main .section.catbnr-underwear>div .columns-scroll .copy-wrapper p { font-weight: var(--fw-semibold)!important; color: var(--clr-white); font-size: 1.2rem; line-height: 1.2; margin: 0; filter: drop-shadow(0 0 .03em #000000) drop-shadow(0 0 .1em #000000) drop-shadow(0 0 .5em #00000050) drop-shadow(0 0 1em #00000030) } @media (width >= 360px),(min-width: 360px) { main .section.catbnr-underwear>div .columns-scroll .copy-wrapper p { font-size:clamp(1.1rem, .8rem + .6vw, 2rem); } } @media (width >= 768px),(min-width: 600px) { main .section.catbnr-underwear>div .columns-scroll .copy-wrapper p { font-size:clamp(1.4rem, 1rem + 1vw, 2rem); } .catbnr-underwear .columns-scroll > div a .copy-wrapper, .catbnr-underwear .columns-scroll > div > a {max-height: 12lh;}} @media (width >= 1024px),(min-width: 1024px) { .catbnr-underwear .columns-scroll > div a .copy-wrapper, .catbnr-underwear .columns-scroll > div > a { max-height: unset; height: 100%; } main .fragment-wrapper .section.catbnr-underwear:not(:has(.tabs)) {grid-template-columns: 1fr 0.6fr} main .section.catbnr-underwear:not(:has(.tabs)) {padding: 0!important;} .catbnr-underwear .promo-wrapper {grid-area: 1/2/1/2;} .catbnr-underwear .columns-scroll>div {min-width: 31%;} main .section.catbnr-underwear>div .columns-scroll .copy-wrapper p {font-size: clamp(1.2rem, 1rem + 1vw, 1.4rem);}} @media (width >= 1200px),(min-width: 1200px) { .catbnr-underwear .columns-scroll>div { min-width:0; flex: 1 1; } } @media (width >= 1400px),(min-width: 1400px) { main .fragment-wrapper .section.catbnr-underwear:not(:has(.tabs)) { grid-template-columns:1fr 0.5fr; padding: 0; } main .section.catbnr-underwear:not(:has(.tabs)) {padding: 0 !important;} main .section.catbnr-underwear>div .columns-scroll .copy-wrapper p {font-size: clamp(1rem, .6rem + .7vw, 2rem);} .catbnr-underwear .promo-wrapper .promo>div>div {font-size: clamp(2rem, 1.2rem + 2vw, 5rem);padding: 1lh var(--gutter-m);}}