/* @group @variables */

[class*="o-hero-content"] {
--hero-content-margin-top: var(--grobal-head-height);
--head-1-font-family: var(--font-family-heading);
--head-1-font-size: 4.5rem;
--head-1-line-height: 1.1;
--head-1-font-weight: 100;
--head-1-font-variation-settings: "wght" 100;
--head-1-color: var(--color-white);
--head-2-font-size: 1.5rem;
--head-2-line-height: 1.5;
--head-2-font-weight: 300;
--head-2-font-variation-settings: "wght" 300;
--head-2-color: var(--color-white);
--hero-content-media-aspect-ratio: 16 / 9;
}

@media all and (max-width:47.9375em) {

[class*="o-hero-content"] {
}

}

@media all and (min-width:48em) {

[class*="o-hero-content"] {

}

}

/* @end @variables */

/* @group @o-hero-content */

[class*="o-hero-content"] {
overflow: hidden;
display: grid;
grid-template-columns: 2.25rem 1fr 2.25rem;
grid-template-rows: 2.25rem 1fr 2.25rem;
margin-top: var(--hero-content-margin-top);
margin-right: var(--x-padding-right);
margin-left: var(--x-padding-left);
}

[class*="m-hero-content-body"] {
grid-column: 2;
grid-row: 2;
}

[class*="a-hero-content-media"] {
grid-column: 1 / span 3;
grid-row: 1 / span 3;
}

/* @end @o-hero-content */

/* @group @o-hero-content */

[class*="o-hero-content"]:before {
content: '';
position: relative;
z-index: 2;
display: block;
width: 100%;
height: 100%;
}

/* @end @o-hero-content */

/* @group @m-hero-content-body */

[class*="m-hero-content-body"] {
position: relative;
z-index: 3;
display: grid;
justify-content: center;
align-items: center;
margin: auto;
writing-mode: vertical-rl;
text-transform: capitalize; 
}

[class*="m-hero-content-body"] h2 {
text-orientation: upright;
text-transform: uppercase;
}

[class*="m-hero-content-body"] h2 span {
margin-bottom: .25rem;
letter-spacing: -.375rem;
}

/* @end @m-hero-content-body */

/* @group @variables */

[class*="a-hero-content-media"] {
--hero-content-media-filter: opacity(.875);
}


/* @end @variables */

/* @group @a-hero-content-media */

[class*="a-hero-content-media"] {
position: relative;
overflow: hidden;
z-index: 1;
display: grid;
width: 100%;
height: 100%;
aspect-ratio: var(--hero-content-media-aspect-ratio);
}

[class*="a-hero-content-media"]:before {
content: '';
position: absolute;
z-index: 2;
inset: 0;
width: 100%;
height: 100%;
background-color: hsla(0, 0%, 20%, .375);
}

[class*="a-hero-content-media"] img {
display: block;
width: 100%;
height: 100%;
aspect-ratio: var(--aspect-ratio);
object-fit: cover;
object-position: center center;
filter: var(--hero-content-media-filter);
transition: var(--hero-content-media-transition);
will-change: transform;
pointer-events: none;
}

/* @end @a-hero-content-media */