/* @group @variables */

[class*="o-archive-hero"] {
--archive-hero-grid-template-columns: var(--x-padding-left) 1fr var(--x-padding-right);
--archive-hero-grid-template-rows: 2.25rem auto 2.25rem;
/*--archive-hero-background-color: var(--color-quaternary); */
--archive-hero-background-image: linear-gradient(75deg, var(--color-tertiary) 0%, var(--color-quaternary) 100%);
/*--archive-hero-background-image: linear-gradient(-75deg, hsla(45, 80%, 90%, 1) 0%, var(--color-quaternary) 100%); */
/*--archive-hero-background-image: radial-gradient(circle, hsla(45, 80%, 90%, 1) 0%, var(--color-quaternary) 50%); */
}

/* @end @variables */

/* @group @m-archive-hero */

[class*="o-archive-hero"] {
box-sizing: border-box;
position: relative;
overflow: hidden;
z-index: 2;
display: grid;
justify-content: center;
grid-template-columns: var(--archive-hero-grid-template-columns);
grid-template-rows: var(--archive-hero-grid-template-rows);
gap: var(--archive-hero-gap);
background-color: var(--archive-hero-background-color);
background-image: var(--archive-hero-background-image);
background-position: 40% 60%;
}

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

/* @end @m-archive-hero */

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

/* @group @variables */

[class*="m-archive-hero-body"] {
--grid-template-columns: repeat(1, 1fr);
--gap: .375rem;
--head-1-margin-bottom: 0;
--head-1-font-size: clamp(1.5rem, 6vw, 2.25rem);
--head-1-color: var(--color-very-dark-gray);
--head-1-line-height: 1.22222222;
--head-1-font-weight: 200;
--head-1-font-variation-settings: "wght" 150;
/*--font-size: 1.125rem;
--line-height: 1.33333333;
--paragraph-line-height: var(--line-height); */
--font-weight: 200;
--font-variation-settings: "wght" 200;
--color: var(--color-very-dark-gray);
}

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

[class*="m-archive-hero-body"] {
--head-1-font-size: 2.25rem;
}

}

/* @end @variables */

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

[class*="m-archive-hero-body"] {
display: grid;
justify-content: center;
align-content: center;
grid-template-columns: var(--grid-template-columns);
grid-template-rows: var(--grid-template-rows);
gap: var(--gap);
}

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

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

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

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