/* main header --------------------------------------------------------*/

/* @group @variables */

[class*="o-mutual-hero"] {
--head-1-font-family: var(--font-family-brand-secondary);
--head-1-font-size: 3rem;
--head-1-line-height: 1.5;
--head-1-font-weight: 500;
--head-1-word-break: keep-all;

--head-2-font-family: var(--font-family-default);
--head-2-font-size: 1.25rem;
--head-2-line-height: 1.5;
--head-2-font-weight: 500;
--head-2-word-break: keep-all;
--text-block-margin-bottom: 0;
--word-break: keep-all;
}

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

[class*="o-mutual-hero"] {
--head-1-font-size: 4.5rem;
--head-1-line-height: 1.083333333;
--head-2-font-size: 1.875rem;
}

}

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

[class*="o-mutual-hero"] {
--head-2-font-size: var(--font-size-calc-septenary);
--head-2-line-height: var(--line-height-septenary);
}

}*/

/* @end @variables */

/* @group @o-mutual-hero */

[class*="o-mutual-hero"] {
position: relative;
display: grid;
place-items: center start;
display: grid;
grid-template-columns: var(--x-padding-left) 1fr auto var(--x-padding-right);
grid-template-rows: 3rem auto 0 3rem;
min-height: 20rem;
color: var(--color-white);
}

[class*="o-mutual-hero"]:after {
content: '';
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
grid-column: 1 / 5;
grid-row: 1 / 5;
background-color: hsla(0, 0%, 20%, .75);
}

/* @end @o-mutual-hero */

/* --------------------------------------------------------*/

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

[class*="a-hero-media"] {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
grid-column: 1 / 5;
grid-row: 1 / 5;
}

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

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

/* --------------------------------------------------------*/

/* @group @variables */

[class*="m-hero-body"] {
--text-block-margin-bottom: 0;
--mutual-hero-body-place-items: var(--place-items-center-primary);
--mutual-hero-body-gap: .75rem;
}

/* @end @variables */

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

[class*="m-hero-body"] {
position: relative;
z-index: 3;
grid-column: 2 / 4;
grid-row: 2;
display: grid;
place-items: var(--mutual-hero-body-place-items);
gap: var(--mutual-hero-body-gap);
width: 100%;
}

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