/* quick links mobile bar */

main .section.quick-links-bar-container { padding: 0 !important; background: var(--clr-brand-white); margin-block: 0 !important;}

.section.quick-links-bar-container ul { padding: 0; }

.quick-links-bar { padding-block: var(--spacing-m); margin: 0 !important; }

.quick-links-bar ul li { padding-inline: var(--gutter-xs); }

.quick-links-bar.no-overflow ul li { padding-inline: var(--gutter-s); flex: 1 1 auto !important;}

.quick-links-bar.no-overflow ul li:not(:last-child) { border-right: 1px solid var(--text-color); }

.quick-links-bar ul li a { text-transform: uppercase; color: var(--text-color); font-weight: var(--fw-bold);}

@media (width >= 768px) {.section.quick-links-bar-container {display: none;}}

.banner-type-promo > div { background: none;}

/* homepage */

.section:has(.slide[class*="promo"], .slide[class*="hero"]), .section.hero, .section:has(.fragment-wrapper), .section:has(.full-bleed) { margin-block-end: var(--spacing-l); padding-block: 0; }

.slide-wrapper :is(.slide[class*="promo"], .slide.hero) div.copy-wrapper { padding: var(--gutter-m); }

.section .block.hero h1 { text-transform: uppercase; font-size: clamp(2.4rem, calc(2.2rem + 2vw), 3.4rem); margin-block-end: var(--gutter-m) !important;}

.block.hero h1 em { font-family: var(--heading-font-family-secondary); font-style: normal; }

.block.hero h1 strong em { font-family: var(--heading-font-family-secondary-bold); font-style: normal; }

.slide-wrapper .slide.hero .cta-wrapper { margin-block-start: 0.5em;}

.slide[class*="promo"] h2 { text-transform: uppercase; font-size: clamp(2.2rem, calc(1rem + 2vw), 3rem); }

.slide[class*="promo"] h2 em { font-family: var(--heading-font-family-secondary); font-style: normal; }

.slide[class*="promo"] h2 strong em { font-family: var(--heading-font-family-secondary-bold); font-style: normal; }

main .section > div .block:where([class*="promo"], .hero) p { line-height: 1.2; font: var(--font-pragmatica-extd); font-size: clamp(1.4rem, calc(1rem + 0.75vw), 3rem); }

.cta-wrapper:has(p.button-container + p.button-container) p.button-container a { margin-block-end: 0;}

p.button-container { margin-block-end: 0 !important;}

@media (width <= 360px) { .slide[class*="promo"] h2 { font-size: min(calc(1.4rem + 2vw), 5.4rem); } }

@media (width >= 400px) { .section .block.hero h1 { font-size: clamp(2.6rem, calc(3rem + 2vw), 4.4rem); } }

@media (width <= 767px) { .slide[class*="promo"] .cta-wrapper { justify-content: center; } }

@media (width >= 768px) { .section .block.hero h1 { font-size: clamp(2.6rem, calc(3rem + 2vw), 2.8rem); } }

@media (width >= 1024px) { .section .block.hero h1 { font-size: clamp(2.8rem, calc(2rem + 1.8vw), 6.4rem); }

.slide[class*="promo"] h2 {font-size: clamp(2.2rem, calc(1rem + 2vw), 5.6rem);}
main .section > div .block:where([class*="promo"], .hero) p {font-size: clamp(1.2rem, calc(1rem + 0.4vw), 2rem)} }

@media (width >= 1440px) { .section .block.hero h1 { font-size: clamp(3rem, calc(2.5rem + 2vw), 7rem); } }

@media (width >= 1900px) { .section .block.hero h1 { font-size: clamp(3rem, calc(3rem + 3vw), 7rem); } }

main .banner .promotion-content p a { color: black !important; }

.fragment-carousel-wrapper > button { background: #ffffff70 !important; border-radius: 4px !important; }

.fragment-carousel-wrapper > button:is(:hover, :focus-visible) { background: #ffffff !important; }

@media (min-width: 900px), (width >= 900px) { .fragment-carousel-wrapper > button { width: 4.4rem !important; height: 4.4rem !important; }

.fragment-carousel-wrapper > button::after {height: 4.4rem !important;width: 4.4rem !important;mask-size: 2.6rem !important;} }