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

/* @group @variables */

[class*="o-mutual-hero"] {
--head-1-font-family: var(--font-family-brand-secondary);
--head-1-font-size: 2.25rem;
--head-1-line-height: 1.166666667;
--head-1-font-size: 2.625rem;
--head-1-line-height: 1.142857143;
--head-1-font-weight: 500;
--head-1-text-align: center;
--text-block-margin-bottom: 0;
}

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

[class*="o-mutual-hero"] {
--head-1-font-size: 2.625rem;
--head-1-line-height: 1.142857143;
--head-1-font-size: 3rem;
--head-1-line-height: 1.125;
}

}

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

[class*="o-mutual-hero"] {
--head-1-font-size: 2.625rem;
--head-1-line-height: 1.142857143;
--head-1-font-size: 3rem;
--head-1-line-height: 1.125;
}

}

/*@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);
text-align: center;
}

[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 */

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

/* @group @variables */

[class*="a-hero-info"] {
--grid-x-count: 2;
--grid-x-repeat: auto;
--grid-columns: repeat(var(--grid-x-count), var(--grid-x-repeat));
--grid-place-items: var(--place-items-center-primary);
--grid-gap: .75rem;
}

/* @end @variables */

/* @group @a-hero-info */

[class*="a-hero-info"] {
box-sizing: border-box;
display: grid;
grid-template-columns: var(--grid-columns);
grid-template-rows: var(--grid-rows);
place-items: var(--grid-place-items);
gap: var(--grid-gap);
}

[class*="a-hero-info"]>li:not(:first-of-type) {
position: relative;
padding-left: var(--grid-gap) ;
}

[class*="a-hero-info"]>li:not(:first-of-type):before {
content: '';
position: absolute;
top: .375rem;
left: 0;
bottom: .375rem;
width: 1px;
background-color: currentColor;
}

/* @end @a-hero-info */