/* @group @variables */

:root {
--hero-height: 21rem;
--hero-max-height: 21rem;
--hero-background-color: hsla(45, 30%, 90%, .375);
}

[class*="m-hero-body"] {
--grid-template-columns: 1.5rem 1fr 1.5rem;
--grid-template-rows: auto .75rem auto;
--head-1-font-family: var(--font-family-heading);
--head-1-font-size: clamp(2.625rem, 1.75rem + 4.38vw, 5.25rem);/* 42 > 84 / 320 > 1440 */ 
--head-1-color: var(--color-white);
--head-1-line-height: 1.22222222;
--font-size: 1.5rem;
--line-height: 1.5;
--font-weight: 500;
--color: var(--color-white);
}

/* @end @variables */

/* @group @m-hero */

[class*="o-hero"] {
display: grid;
justify-content: center;
place-content: center;
grid-template-columns: var(--x-padding-left) 1fr var(--x-padding-right);
grid-template-rows: 6rem 1fr 1.5rem;
}

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

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

/* @end @m-hero */

/* @group @m-hero */

[class*="o-hero"] {
box-sizing: border-box;
position: relative;
overflow: hidden;
z-index: 3;
height: var(--hero-height);
max-height: var(--hero-max-height);
}

/* @end @m-hero */

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

[class*="a-hero-media"] {
position: relative;
z-index: -1;
height: var(--hero-media-height);
}

[class*="a-hero-media"] img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}

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

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

[class*="m-hero-body"] {
display: grid;
align-items: center;
align-content: center;
grid-auto-flow: row;
gap: .75rem;
}

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

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

[class*="m-hero-body"] {
box-sizing: border-box;
position: relative;
z-index: 2;
text-transform: uppercase;
}

[class*="m-hero-body"] h1,
[class*="m-hero-body"] p {
text-shadow: 0.7px 0.7px hsl(220deg 20% 40% / 50%), 1px 0 hsl(220deg 20% 40% / 50%), 0.7px -0.7px hsl(220deg 20% 40% / 50%), 0 -1px hsl(220deg 20% 40% / 50%), -0.7px -0.7px hsl(220deg 20% 40% / 50%), -1px 0 hsl(220deg 20% 40% / 50%), -0.7px 0.7px hsl(220deg 20% 40% / 50%), 0 1px hsl(220deg 20% 40% / 50%);
}

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