.hero-banner .image-with-text{--clip-amount-base: 40vw;--hero-banner-grid: "image heading" "description description";--hero-banner-grid-reversed: "heading image" "description description";grid-template-areas:var(--hero-banner-grid)}.hero-banner .image-with-text{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-banner .image-with-text .image{grid-area:image}.hero-banner .image-with-text.image-first{grid-template-areas:var(--hero-banner-grid);grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}.hero-banner .image-with-text.text-first{grid-template-areas:var(--hero-banner-grid-reversed);grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.hero-banner .image-with-text.text-first .image{grid-column-start:1}.hero-banner.image-slant .image-with-text.text-first .image{padding-inline-start:calc(var(--clip-amount-base) * .5)}.hero-banner.image-slant .image-with-text.image-first .image{padding-inline-end:calc(var(--clip-amount-base) * .5)}.hero-banner.image-slant .text-first .media{clip-path:polygon(var(--clip-amount-base, 0) 0,100% 0,100% 100%,0 100%)}.hero-banner .image-with-text.image-first .image{display:grid;grid-column-end:3}.hero-banner.image-slant .image-first .media{clip-path:polygon(0 0,calc(100% - var(--clip-amount-base, 0)) 0,100% 100%,0 100%)}.hero-banner .image-with-text .mobile-heading{grid-area:heading;padding:var(--sp-4)}.hero-banner .image-with-text.image-first .mobile-heading{padding-inline-start:0}.hero-banner .image-with-text.text-first .mobile-heading{padding-inline-end:0}.hero-banner .image-with-text .mobile-heading .heading{font-size:var(--title-md)}.hero-banner .image-with-text .mobile-description{grid-area:description;padding:var(--sp-4)}@media screen and (min-width: 480px){.hero-banner .image-with-text{--clip-amount-base: 30vw}.hero-banner.image-slant .image-with-text.text-first .image{padding-inline-start:calc(var(--clip-amount-base) * 1)}.hero-banner.image-slant .image-with-text.image-first .image{padding-inline-end:calc(var(--clip-amount-base) * 1)}}@media screen and (min-width: 768px){.hero-banner .image-with-text{--clip-amount-base: 25vw}.hero-banner .image-with-text .mobile-heading{font-size:var(--title-md)}.hero-banner.image-slant .image-with-text.text-first .image{padding-inline-start:calc(var(--clip-amount-base) * 1.2)}.hero-banner.image-slant .image-with-text.image-first .image{padding-inline-end:calc(var(--clip-amount-base) * 1.2)}}@media screen and (min-width: 1024px){.hero-banner .image-with-text__item+.image-with-text__item .rich-text{padding-block:var(--sp-10)}.hero-banner .text-first .image-with-text__item+.image-with-text__item .rich-text{padding-inline-start:var(--page-padding);padding-inline-end:0}.hero-banner .image-first .image-with-text__item+.image-with-text__item .rich-text{padding-inline-start:0;padding-inline-end:var(--page-padding)}.hero-banner .text-first .image-with-text__item+.image-with-text__item .rich-text .hero-banner-text{padding-inline-end:var(--sp-4)}.hero-banner .image-first .image-with-text__item+.image-with-text__item .rich-text .hero-banner-text{padding-inline-start:var(--sp-4)}.hero-banner.image-slant .image-first .media{clip-path:var(--clip-right-top-to-bottom)}.hero-banner.image-slant .text-first .media{clip-path:var(--clip-left-top-to-bottom)}.hero-banner .image-with-text__item:has(picture){width:60%}.hero-banner .image-with-text__item:has(.heading){width:40%}.hero-banner.image-slant .image-with-text.text-first .image{padding-left:unset}.hero-banner.image-slant .image-with-text.image-first .image{padding-right:unset}}@media screen and (min-width: 1536px){.hero-banner .image-with-text__item+.image-with-text__item .rich-text{padding-block:var(--sp-10)}.hero-banner .text-first .image-with-text__item+.image-with-text__item .rich-text{padding-inline-start:var(--page-padding);padding-inline-end:0}.hero-banner .image-first .image-with-text__item+.image-with-text__item .rich-text{padding-inline-start:0;padding-inline-end:var(--page-padding)}.hero-banner .text-first .image-with-text__item+.image-with-text__item .rich-text .hero-banner-text{padding-inline-end:var(--sp-4)}.hero-banner .image-first .image-with-text__item+.image-with-text__item .rich-text .hero-banner-text{padding-inline-start:var(--sp-4)}}
/*# sourceMappingURL=/cdn/shop/t/22/assets/hero-banner.css.map */