.blog-hero-banner{position:relative;width:100%;overflow:hidden;isolation:isolate}.blog-hero-banner .blog-hero-banner__media{position:relative;width:100%;height:var(--banner-height-mobile, 320px);overflow:hidden}.blog-hero-banner .blog-hero-banner__img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}.blog-hero-banner .blog-hero-banner__img--desktop{display:none}.blog-hero-banner .blog-hero-banner__img--mobile{display:block}.blog-hero-banner .blog-hero-banner__placeholder{background:rgb(var(--color-foreground),.05);display:flex;align-items:center;justify-content:center}.blog-hero-banner .blog-hero-banner__placeholder .placeholder-svg{width:100%;height:100%}.blog-hero-banner .blog-hero-banner__content{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:24px;z-index:2;max-width:var(--page-content-width);margin-inline:auto}.blog-hero-banner .blog-hero-banner__pills{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}.blog-hero-banner .blog-hero-banner__pills .blog-hero-banner__pill{padding:8px 12px;border-radius:50px;line-height:1;min-height:36px;text-transform:capitalize}.blog-hero-banner .blog-hero-banner__pills .blog-hero-banner__pill.is-active{--button-color: var(--color-primary-button-hover-text);--button-background-color: var(--color-primary-button-hover-background);--button-border-color: var(--color-primary-button-hover-border)}@media(min-width:1300px){.blog-hero-banner .blog-hero-banner__pills .blog-hero-banner__pill{font-size:calc(var(--font-paragraph--size) - 2px);line-height:1.25}}@media(max-width:1360px){.blog-hero-banner .blog-hero-banner__content{padding-inline:40px}}@media(min-width:750px){.blog-hero-banner .blog-hero-banner__content{padding-inline:24px}.blog-hero-banner .blog-hero-banner__media{height:var(--banner-height-desktop, 720px)}.blog-hero-banner .blog-hero-banner__img--desktop{display:block}.blog-hero-banner .blog-hero-banner__img--mobile{display:none}}@media(max-width:749px){.blog-hero-banner .blog-hero-banner__content{gap:16px}.blog-hero-banner .blog-hero-banner__pills{gap:8px}}@media(max-width:480px){.blog-hero-banner .blog-hero-banner__pills .blog-hero-banner__pill{padding:4px 8px;min-height:26px;font-size:12px;line-height:1.5}}
/*# sourceMappingURL=/cdn/shop/t/34/assets/blog-hero-banner.css.map */