.xo-section.listicle-hero,.xo-section.listicle-hero *{letter-spacing:-.02em}.listicle-hero{padding-top:calc(var(--pt) * 5 / 6 * 1px);padding-bottom:calc(var(--pb) * 5 / 6 * 1px)}@media(min-width:768px){.listicle-hero{padding-top:calc(var(--pt) * 1px);padding-bottom:calc(var(--pb) * 1px)}}.listicle-hero__banner{position:relative;display:flex;align-items:flex-end;width:100%;height:var(--banner-height-mobile, 236px);overflow:hidden}@media(min-width:768px){.listicle-hero__banner{height:var(--banner-height-desktop, 520px)}}.listicle-hero--under-header{margin-top:calc(-1 * var(--header-height, 46px))}.listicle-hero--under-header .listicle-hero__banner{height:calc(var(--banner-height-mobile, 236px) + var(--header-height, 46px))}@media(min-width:768px){.listicle-hero--under-header .listicle-hero__banner{height:calc(var(--banner-height-desktop, 520px) + var(--header-height, 46px))}}.listicle-hero__banner--center{align-items:center}.listicle-hero__image{position:absolute;top:0;right:0;bottom:0;left:0}.listicle-hero__image--desktop{display:none}@media(min-width:768px){.listicle-hero__image--desktop{display:block}.listicle-hero__image--mobile{display:none}}.listicle-hero__img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.listicle-hero__overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(to top,rgb(0 0 0 / var(--banner-overlay, 50%)) 0%,rgb(0 0 0 / calc(var(--banner-overlay, 50%) * .6)) 30%,rgb(0 0 0 / calc(var(--banner-overlay, 50%) * .2)) 55%,transparent 75%)}.listicle-hero__banner--center .listicle-hero__overlay{background:rgb(0 0 0 / calc(var(--banner-overlay, 35%) * .6))}.listicle-hero__heading-wrap{position:relative;z-index:1;width:100%;margin:auto auto 0;padding-bottom:20px}@media(min-width:768px){.listicle-hero__heading-wrap{padding-bottom:40px}}.listicle-hero__banner--center .listicle-hero__heading-wrap{margin:auto;padding-bottom:0}.listicle-hero__heading{max-width:900px;margin:0 auto;text-align:center;font-family:var(--font-body-medium-family);font-size:24px;line-height:1.25;color:var(--heading-color, #ffffff);text-shadow:0 1px 6px rgb(0 0 0 / 35%)}@media(min-width:768px){.listicle-hero__heading{font-size:48px;line-height:1.15}}.listicle-hero__body{width:100%;max-width:var(--body-width, 720px);margin:0 auto;padding-top:18px}@media(min-width:768px){.listicle-hero__body{padding-top:40px}}.listicle-hero__content{display:flex;flex-direction:column;gap:14px}@media(min-width:768px){.listicle-hero__content{gap:20px}}.listicle-hero__intro,.listicle-hero__intro p{font-family:var(--font-body-family);font-size:18px;line-height:1.45;color:var(--color-text)}@media(min-width:768px){.listicle-hero__intro,.listicle-hero__intro p{font-size:20px}}.listicle-hero__intro p{margin:0}.listicle-hero__intro p+p{margin-top:16px}@media(min-width:768px){.listicle-hero__intro p+p{margin-top:20px}}.listicle-hero__intro strong{font-family:var(--font-body-medium-family)}.listicle-hero__meta{display:flex;flex-direction:column;gap:4px;padding:8px 12px;border:1px solid var(--color-border, #d0d0d0);border-left:3px solid var(--color-accent);border-radius:4px;background:color-mix(in srgb,var(--color-text) 4%,var(--color-bg, #ffffff));font-family:var(--font-body-family);font-size:13px;line-height:1.35;color:var(--color-text)}@media(min-width:768px){.listicle-hero__meta{align-self:flex-start;padding:10px 16px;font-size:15px}}.listicle-hero__meta-highlight{font-family:var(--font-body-medium-family)}html:has(.listicle-hero__toc){scroll-behavior:smooth}.listicle-hero__toc{display:flex;flex-direction:column;gap:8px}.listicle-hero__toc-title{margin:0;font-family:var(--font-body-medium-family);font-size:16px;line-height:20px;color:var(--color-accent)}.listicle-hero__toc-list{display:grid;grid-template-columns:1fr;margin:0;padding:0;list-style:none;border-top:1px solid var(--color-border, #d0d0d0)}.listicle-hero__toc-item{border-bottom:1px solid var(--color-border, #d0d0d0)}.listicle-hero__toc-link{display:flex;align-items:center;gap:14px;min-height:56px;padding:10px 0;text-decoration:none;color:var(--color-heading);font-family:var(--font-body-medium-family);font-size:18px;line-height:22px;transition:color .2s ease}@media(min-width:768px){.listicle-hero__toc-link{min-height:64px;font-size:20px;line-height:24px}}.listicle-hero__toc-link:hover,.listicle-hero__toc-link:focus-visible{color:var(--color-accent)}.listicle-hero__toc-link:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.listicle-hero__toc-number{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--color-accent);color:var(--color-bg, #ffffff);font-size:15px;line-height:1}.listicle-hero__toc-text{flex:1;min-width:0}.listicle-hero__toc-arrow{flex-shrink:0;color:var(--color-accent);transition:transform .2s ease}.listicle-hero__toc-link:hover .listicle-hero__toc-arrow{transform:translateY(3px)}@media(min-width:992px){.listicle-hero__content--with-toc{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,38%);grid-template-areas:"intro toc" "meta toc" ". toc";grid-template-rows:auto auto 1fr;column-gap:64px;row-gap:20px;align-items:start}.listicle-hero__content--with-toc .listicle-hero__intro{grid-area:intro}.listicle-hero__content--with-toc .listicle-hero__meta{grid-area:meta}.listicle-hero__content--with-toc .listicle-hero__toc{grid-area:toc}}.listicle-hero--card .listicle-hero__body{position:relative;z-index:2;margin-top:calc(-1 * var(--card-overlap-mobile, 32px));padding:24px 20px;border-radius:8px;background:var(--color-bg, #ffffff);box-shadow:0 8px 32px #0000001f}@media(min-width:768px){.listicle-hero--card .listicle-hero__body{margin-top:calc(-1 * var(--card-overlap-desktop, 96px));padding:48px 56px}}.listicle-hero--card .listicle-hero__heading-wrap{padding-bottom:calc(20px + var(--card-overlap-mobile, 32px))}@media(min-width:768px){.listicle-hero--card .listicle-hero__heading-wrap{padding-bottom:calc(40px + var(--card-overlap-desktop, 96px))}}.listicle-hero--card .listicle-hero__banner--center .listicle-hero__heading-wrap{padding-bottom:var(--card-overlap-mobile, 32px)}@media(min-width:768px){.listicle-hero--card .listicle-hero__banner--center .listicle-hero__heading-wrap{padding-bottom:var(--card-overlap-desktop, 96px)}}
/*# sourceMappingURL=/cdn/shop/t/394/assets/section-listicle-hero.css.map */