.collection-hero{padding:0}.collection-hero__inner{position:relative;overflow:hidden;height:16rem;display:flex;align-items:center;border:1px solid rgba(255,255,255,.08);border-radius:1.2rem}@media screen and (min-width:750px){.collection-hero__inner{height:20rem}}.collection-hero__text-wrapper{position:relative;z-index:2;max-width:56rem;padding:3rem 2.4rem}@media screen and (min-width:750px){.collection-hero__text-wrapper{padding:4rem 3.6rem}}.collection-hero__title{margin:0;font-family:var(--font-heading-family, "Space Grotesk", sans-serif);font-weight:630;font-size:2.8rem;line-height:1.15;color:#fff;letter-spacing:-.02em}@media screen and (min-width:750px){.collection-hero__title{font-size:4.4rem}}.collection-hero__description{margin-top:1rem;font-size:1.5rem;line-height:1.55;color:#ffffff8c;max-width:42ch}@media screen and (min-width:750px){.collection-hero__description{margin-top:1.2rem;font-size:1.6rem}}.collection-hero__title+.collection-hero__description{margin-top:1rem;margin-bottom:0;font-size:1.5rem;line-height:1.55}@media screen and (min-width:750px){.collection-hero__title+.collection-hero__description{margin-top:1.2rem;font-size:1.6rem}}.collection-hero__image-container{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;border:none;border-radius:0;box-shadow:none;overflow:hidden}.collection-hero__image-container img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.collection-hero__image-container:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;background:linear-gradient(to right,rgb(var(--color-background)),rgba(var(--color-background),.85) 30%,rgba(var(--color-background),.35) 55%,rgba(var(--color-background),0) 75%)}@media screen and (max-width:749px){.collection-hero__image-container:before{background:linear-gradient(to bottom,rgb(var(--color-background)),rgba(var(--color-background),.85) 30%,rgba(var(--color-background),.35) 55%,rgba(var(--color-background),0) 75%)}}.collection-hero:not(.collection-hero--with-image) .collection-hero__inner{min-height:auto}.collection-hero:not(.collection-hero--with-image) .collection-hero__text-wrapper{padding:3.2rem 2.4rem}@media screen and (min-width:750px){.collection-hero:not(.collection-hero--with-image) .collection-hero__text-wrapper{padding:4rem 3.6rem}}
/*# sourceMappingURL=/cdn/shop/t/27/assets/component-collection-hero.css.map */