/* Shared presentation for authored sections and their editor preview. */
.yeti-page-hero{position:relative;isolation:isolate;padding:clamp(48px,7vw,110px) clamp(22px,5vw,72px);margin:0 0 40px;background:linear-gradient(125deg,#e9eeea,#f8f6f0 68%);color:var(--yeti-ink,#29231d);border-bottom:1px solid #c6d0c6;overflow:hidden}
.yeti-page-hero h1{max-width:1000px;margin:16px 0 24px;font:600 clamp(34px,5vw,70px)/1.08 system-ui,sans-serif;letter-spacing:-.045em;text-wrap:balance;color:inherit}
.yeti-page-hero>small{font:600 11px/1.5 system-ui,sans-serif;letter-spacing:.15em;color:var(--yeti-muted,#655d53)}
.yeti-page-hero p{max-width:720px;font-size:clamp(16px,1.5vw,20px);line-height:1.65;color:var(--yeti-muted,#655d53)}
.yeti-page-hero>img{display:block;max-height:560px;width:100%;object-fit:cover;border-radius:18px;margin-top:32px}
.yeti-page-hero.category-hero{background:linear-gradient(90deg,#102d30dc,#102d3033),var(--category-hero-image) center/cover;color:#fff}
.yeti-page-hero.category-hero h1{color:inherit}
.yeti-page-hero.category-hero :is(p,small){color:#f4f1e8}
.prose-premium{font:400 18px/1.8 system-ui,sans-serif;overflow-wrap:anywhere;display:flow-root;max-width:100%}
.article-body.prose-premium,.masterclass-body.prose-premium{max-width:1000px;margin:48px auto}
.yeti-page-hero .fade-in{opacity:1;transform:none}
.editorial-detail{padding-bottom:70px}.editorial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px}.editorial-card{padding:24px;border:1px solid #dce3dd;border-radius:18px}.editorial-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
@media(max-width:640px){.yeti-page-hero{padding:40px 20px;margin-bottom:24px}.prose-premium{font-size:16px}.yeti-page-hero h1{font-size:36px}}
/* ============================================================
YETI³ HERO MEDIA — FULL BLEED / CENTER FOCUS
============================================================ */
.yeti-page-hero {
position: relative;
overflow: hidden;
}
/* Image / video fills the whole hero */
.yeti-page-hero img,
.yeti-page-hero video,
.yeti-page-hero picture,
.yeti-page-hero .hero-media,
.yeti-page-hero .hero-media img,
.yeti-page-hero .hero-media video {
width: 100% !important;
height: 100% !important;
}
/* Actual raster/video element */
.yeti-page-hero img,
.yeti-page-hero video,
.yeti-page-hero .hero-media img,
.yeti-page-hero .hero-media video {
display: block;
object-fit: cover !important;
object-position: 50% 50% !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Picture must not limit its child */
.yeti-page-hero picture {
display: block !important;
position: absolute;
inset: 0;
overflow: hidden;
}
/* Full-bleed media layer */
.yeti-page-hero .hero-media,
.yeti-page-hero [data-hero-media] {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
}
/* Keep text/content over media */
.yeti-page-hero > .container,
.yeti-page-hero .hero-content,
.yeti-page-hero [data-hero-content] {
position: relative;
z-index: 2;
}
/* Video behaves identically to image */
.yeti-page-hero video {
object-fit: cover !important;
object-position: center center !important;
}
/* Mobile still focuses on center */
@media (max-width: 760px) {
.yeti-page-hero img,
.yeti-page-hero video,
.yeti-page-hero .hero-media img,
.yeti-page-hero .hero-media video {
object-position: 50% 50% !important;
}
}
/* ============================================================
YETI³ HERO — REAL FULL BLEED MEDIA
Full viewport width, centered crop.
PDP hero is intentionally excluded.
============================================================ */
.yeti-page-hero:not(.pdp-exec) {
position: relative !important;
overflow: hidden !important;
isolation: isolate;
}
/* ------------------------------------------------------------
MEDIA WRAPPERS
Break them out of .container to full viewport width
------------------------------------------------------------ */
.yeti-page-hero:not(.pdp-exec) .hero-media,
.yeti-page-hero:not(.pdp-exec) [data-hero-media],
.yeti-page-hero:not(.pdp-exec) .yeti-page-hero__media,
.yeti-page-hero:not(.pdp-exec) .page-hero__media,
.yeti-page-hero:not(.pdp-exec) .container > picture,
.yeti-page-hero:not(.pdp-exec) .container > video,
.yeti-page-hero:not(.pdp-exec) .container > img {
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: 50% !important;
right: auto !important;
width: 100vw !important;
max-width: none !important;
height: 100% !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
transform: translateX(-50%) !important;
overflow: hidden !important;
z-index: 0 !important;
}
/* ------------------------------------------------------------
ACTUAL IMAGE / VIDEO
------------------------------------------------------------ */
.yeti-page-hero:not(.pdp-exec) .hero-media img,
.yeti-page-hero:not(.pdp-exec) .hero-media video,
.yeti-page-hero:not(.pdp-exec) [data-hero-media] img,
.yeti-page-hero:not(.pdp-exec) [data-hero-media] video,
.yeti-page-hero:not(.pdp-exec) .yeti-page-hero__media img,
.yeti-page-hero:not(.pdp-exec) .yeti-page-hero__media video,
.yeti-page-hero:not(.pdp-exec) .page-hero__media img,
.yeti-page-hero:not(.pdp-exec) .page-hero__media video,
.yeti-page-hero:not(.pdp-exec) .container > picture > img,
.yeti-page-hero:not(.pdp-exec) .container > video,
.yeti-page-hero:not(.pdp-exec) .container > img {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
min-width: 100% !important;
max-width: none !important;
height: 100% !important;
min-height: 100% !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important;
/* focus on the visual centre */
object-position: 50% 50% !important;
transform: none !important;
}
/* picture itself must fill the full media layer */
.yeti-page-hero:not(.pdp-exec) picture {
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* ------------------------------------------------------------
HERO CONTENT ABOVE MEDIA
------------------------------------------------------------ */
.yeti-page-hero:not(.pdp-exec) > .container,
.yeti-page-hero:not(.pdp-exec) .hero-content,
.yeti-page-hero:not(.pdp-exec) .yeti-page-hero__content,
.yeti-page-hero:not(.pdp-exec) [data-hero-content] {
position: relative !important;
z-index: 2 !important;
}
/* If media is itself inside .container, container must not clip it */
.yeti-page-hero:not(.pdp-exec) > .container {
overflow: visible !important;
}
/* ------------------------------------------------------------
VIDEO
------------------------------------------------------------ */
.yeti-page-hero:not(.pdp-exec) video {
object-fit: cover !important;
object-position: center center !important;
background: #111;
}
/* ------------------------------------------------------------
MOBILE — same centre-focused full bleed behaviour
------------------------------------------------------------ */
@media (max-width: 760px) {
.yeti-page-hero:not(.pdp-exec) .hero-media,
.yeti-page-hero:not(.pdp-exec) [data-hero-media],
.yeti-page-hero:not(.pdp-exec) .yeti-page-hero__media,
.yeti-page-hero:not(.pdp-exec) .page-hero__media,
.yeti-page-hero:not(.pdp-exec) .container > picture,
.yeti-page-hero:not(.pdp-exec) .container > video,
.yeti-page-hero:not(.pdp-exec) .container > img {
width: 100vw !important;
}
.yeti-page-hero:not(.pdp-exec) img,
.yeti-page-hero:not(.pdp-exec) video {
object-position: 50% 50% !important;
}
}
/* ============================================================
YETI³ · GLOBAL HERO MEDIA CONTRACT
Image / video / background always fills the entire hero.
Crop is centered.
============================================================ */
/* ------------------------------------------------------------
HERO ROOT
------------------------------------------------------------ */
:is(
.hero,
.yeti-page-hero,
[data-component-type="hero"],
.promotion-feature,
.editorial-cover-hero,
.hero-master
) {
position: relative !important;
isolation: isolate !important;
width: 100% !important;
max-width: none !important;
overflow: hidden !important;
background-position: 50% 50% !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
/*
* Hero can live inside a constrained .container.
* Visual hero itself must still reach viewport edges.
*/
:is(
.editorial-detail,
.masterclasses-page,
.account-shell,
.commerce-wide,
.container
) > :is(
.yeti-page-hero,
[data-component-type="hero"]
) {
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
/* ------------------------------------------------------------
KNOWN MEDIA LAYERS
------------------------------------------------------------ */
:is(
.hero,
.yeti-page-hero,
[data-component-type="hero"],
.promotion-feature,
.editorial-cover-hero,
.hero-master
) :is(
.hero-media,
[data-hero-media],
.yeti-page-hero__media,
.page-hero__media,
.promotion-feature-media,
.hero-master-bg
) {
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
display: block !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* ------------------------------------------------------------
DIRECT HERO PICTURE / IMAGE / VIDEO
------------------------------------------------------------ */
:is(
.hero,
.yeti-page-hero,
[data-component-type="hero"],
.promotion-feature,
.editorial-cover-hero,
.hero-master
) > :is(
picture,
img,
video
) {
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Picture wrapper */
:is(
.hero,
.yeti-page-hero,
[data-component-type="hero"],
.promotion-feature,
.editorial-cover-hero,
.hero-master
) picture {
display: block !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* ------------------------------------------------------------
ACTUAL MEDIA
THIS IS THE IMPORTANT PART.
------------------------------------------------------------ */
:is(
.hero,
.yeti-page-hero,
[data-component-type="hero"],
.promotion-feature,
.editorial-cover-hero,
.hero-master
) :is(
img,
video
) {
display: block !important;
width: 100% !important;
min-width: 100% !important;
max-width: none !important;
height: 100% !important;
min-height: 100% !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important;
/*
* Keep the visual subject centred.
* Excess is cropped symmetrically.
*/
object-position: 50% 50% !important;
transform-origin: 50% 50% !important;
}
/* Never allow intrinsic image dimensions to shrink a hero */
:is(
.hero,
.yeti-page-hero,
[data-component-type="hero"],
.promotion-feature,
.editorial-cover-hero,
.hero-master
) img {
aspect-ratio: auto !important;
}
/* Videos follow exactly the same geometry */
:is(
.hero,
.yeti-page-hero,
[data-component-type="hero"],
.promotion-feature,
.editorial-cover-hero,
.hero-master
) video {
object-fit: cover !important;
object-position: center center !important;
background: #111;
}
/* ------------------------------------------------------------
HERO CONTENT
Keep copy above media.
------------------------------------------------------------ */
:is(
.hero,
.yeti-page-hero,
[data-component-type="hero"],
.promotion-feature,
.editorial-cover-hero,
.hero-master
) > :is(
.container,
.hero-content,
.yeti-page-hero__content,
.promotion-feature-copy,
.hero-master-content
) {
position: relative !important;
z-index: 2 !important;
}
/*
* Common case:
* hero has text + an image directly in the same container.
* Image becomes background layer; other children remain content.
*/
:is(
.yeti-page-hero,
[data-component-type="hero"]
) > .container:has(> img, > picture, > video) {
position: static !important;
}
:is(
.yeti-page-hero,
[data-component-type="hero"]
) > .container > :is(
img,
picture,
video
) {
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
:is(
.yeti-page-hero,
[data-component-type="hero"]
) > .container > picture > img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: 50% 50% !important;
}
:is(
.yeti-page-hero,
[data-component-type="hero"]
) > .container > :not(img):not(video):not(picture) {
position: relative;
z-index: 2;
}
/* ------------------------------------------------------------
CATEGORY HERO
Uses --category-hero-image instead of an ![]()
.
------------------------------------------------------------ */
.category-hero {
background-image:
var(--category-hero-image) !important;
background-size:
cover !important;
background-position:
50% 50% !important;
background-repeat:
no-repeat !important;
}
/* ------------------------------------------------------------
EDITORIAL COVER
------------------------------------------------------------ */
.editorial-cover-hero__image {
position: absolute !important;
inset: 0 !important;
z-index: -2 !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
max-height: none !important;
object-fit: cover !important;
object-position: 50% 50% !important;
}
/* ------------------------------------------------------------
PROMOTION HERO
------------------------------------------------------------ */
.promotion-feature-media {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
}
.promotion-feature-media :is(img, video) {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: 50% 50% !important;
}
/* ------------------------------------------------------------
MOBILE
Same contract. No contain, no side gaps.
------------------------------------------------------------ */
@media (max-width: 760px) {
:is(
.hero,
.yeti-page-hero,
[data-component-type="hero"],
.promotion-feature,
.editorial-cover-hero,
.hero-master
) :is(img, video) {
width: 100% !important;
min-width: 100% !important;
height: 100% !important;
min-height: 100% !important;
object-fit: cover !important;
object-position: 50% 50% !important;
}
}
/* ============================================================
YETI³ · GLOBAL HERO MEDIA CONTRACT
Image / video / background always fills the entire hero.
Crop is centered.
============================================================ */
/* ------------------------------------------------------------
HERO ROOT
------------------------------------------------------------ */
:is(
.hero,
.yeti-page-hero,
[data-component-type="hero"],
.promotion-feature,
.editorial-cover-hero,
.hero-master
) {
position: relative !important;
isolation: isolate !important;
width: 100% !important;
max-width: none !important;
overflow: hidden !important;
background-position: 50% 50% !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
/*
* Hero can live inside a constrained .container.
* Visual hero itself must still reach viewport edges.
*/
:is(
.editorial-detail,
.masterclasses-page,
.account-shell,
.commerce-wide,
.container
) > :is(
.yeti-page-hero,
[data-component-type="hero"]
) {
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
/* ------------------------------------------------------------
KNOWN MEDIA LAYERS
------------------------------------------------------------ */
:is(
.hero,
.yeti-page-hero,
[data-component-type="hero"],
.promotion-feature,
.editorial-cover-hero,
.hero-master
) :is(
.hero-media,
[data-hero-media],
.yeti-page-hero__media,
.page-hero__media,
.promotion-feature-media,
.hero-master-bg
) {
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
display: block !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* ------------------------------------------------------------
DIRECT HERO PICTURE / IMAGE / VIDEO
------------------------------------------------------------ */
:is(
.hero,
.yeti-page-hero,
[data-component-type="hero"],
.promotion-feature,
.editorial-cover-hero,
.hero-master
) > :is(
picture,
img,
video
) {
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Picture wrapper */
:is(
.hero,
.yeti-page-hero,
[data-component-type="hero"],
.promotion-feature,
.editorial-cover-hero,
.hero-master
) picture {
display: block !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* ------------------------------------------------------------
ACTUAL MEDIA
THIS IS THE IMPORTANT PART.
------------------------------------------------------------ */
:is(
.hero,
.yeti-page-hero,
[data-component-type="hero"],
.promotion-feature,
.editorial-cover-hero,
.hero-master
) :is(
img,
video
) {
display: block !important;
width: 100% !important;
min-width: 100% !important;
max-width: none !important;
height: 100% !important;
min-height: 100% !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important;
/*
* Keep the visual subject centred.
* Excess is cropped symmetrically.
*/
object-position: 50% 50% !important;
transform-origin: 50% 50% !important;
}
/* Never allow intrinsic image dimensions to shrink a hero */
:is(
.hero,
.yeti-page-hero,
[data-component-type="hero"],
.promotion-feature,
.editorial-cover-hero,
.hero-master
) img {
aspect-ratio: auto !important;
}
/* Videos follow exactly the same geometry */
:is(
.hero,
.yeti-page-hero,
[data-component-type="hero"],
.promotion-feature,
.editorial-cover-hero,
.hero-master
) video {
object-fit: cover !important;
object-position: center center !important;
background: #111;
}
/* ------------------------------------------------------------
HERO CONTENT
Keep copy above media.
------------------------------------------------------------ */
:is(
.hero,
.yeti-page-hero,
[data-component-type="hero"],
.promotion-feature,
.editorial-cover-hero,
.hero-master
) > :is(
.container,
.hero-content,
.yeti-page-hero__content,
.promotion-feature-copy,
.hero-master-content
) {
position: relative !important;
z-index: 2 !important;
}
/*
* Common case:
* hero has text + an image directly in the same container.
* Image becomes background layer; other children remain content.
*/
:is(
.yeti-page-hero,
[data-component-type="hero"]
) > .container:has(> img, > picture, > video) {
position: static !important;
}
:is(
.yeti-page-hero,
[data-component-type="hero"]
) > .container > :is(
img,
picture,
video
) {
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
:is(
.yeti-page-hero,
[data-component-type="hero"]
) > .container > picture > img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: 50% 50% !important;
}
:is(
.yeti-page-hero,
[data-component-type="hero"]
) > .container > :not(img):not(video):not(picture) {
position: relative;
z-index: 2;
}
/* ------------------------------------------------------------
CATEGORY HERO
Uses --category-hero-image instead of an ![]()
.
------------------------------------------------------------ */
.category-hero {
background-image:
var(--category-hero-image) !important;
background-size:
cover !important;
background-position:
50% 50% !important;
background-repeat:
no-repeat !important;
}
/* ------------------------------------------------------------
EDITORIAL COVER
------------------------------------------------------------ */
.editorial-cover-hero__image {
position: absolute !important;
inset: 0 !important;
z-index: -2 !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
max-height: none !important;
object-fit: cover !important;
object-position: 50% 50% !important;
}
/* ------------------------------------------------------------
PROMOTION HERO
------------------------------------------------------------ */
.promotion-feature-media {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
}
.promotion-feature-media :is(img, video) {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: 50% 50% !important;
}
/* ------------------------------------------------------------
MOBILE
Same contract. No contain, no side gaps.
------------------------------------------------------------ */
@media (max-width: 760px) {
:is(
.hero,
.yeti-page-hero,
[data-component-type="hero"],
.promotion-feature,
.editorial-cover-hero,
.hero-master
) :is(img, video) {
width: 100% !important;
min-width: 100% !important;
height: 100% !important;
min-height: 100% !important;
object-fit: cover !important;
object-position: 50% 50% !important;
}
}