/* @group @variables */

[class*="o-category-hero"] {
--category-hero-grid-template-columns: calc(var(--x-padding-left) - .75rem) 0 .75rem 3rem 5fr 6fr .75rem 0 7fr 3rem .75rem 0 calc(var(--x-padding-right) - .75rem);
--category-hero-grid-template-rows: 1.5rem 3fr 1fr 1.5rem 1.5rem 1.5rem;
--category-hero-max-height: 25.5rem;
--category-hero-background-color: hsla(45, 30%, 90%, .375);
--category-hero-margin-bottom: .75rem;
}

/* @end @variables */

/* @group @m-category-hero */

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

[class*="a-category-hero-media"] {
grid-column: 4 / 7;
grid-row: 2 / 6;
}

[class*="m-category-hero-body"] {
grid-column: 5 / 10;
grid-row: 3 / 6;
}

[class*="o-category-hero"]:before {
grid-column: 1 / 3;
grid-row: 2 / 7;
}

[class*="o-category-hero"]:after {
grid-column: 12 / 14;
grid-row: 1 / 5;
}

[class*="a-category-hero-submedia"] {
grid-column: 8 / 11;
grid-row: 1 / 4;
}

/* @end @m-category-hero */

/* @group @m-category-hero */

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

[class*="o-category-hero"]:before {
content: '';
height: 100%;
background-color: hsla(45, 80%, 97.5%, 1)
}

[class*="o-category-hero"]:after {
content: '';
height: 100%;
background-color: hsla(337.3, 38.1%, 97.5%, 1);
}

/* @end @m-category-hero */

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

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

[class*="a-category-hero-media"] {
height: var(--category-hero-media-height);
}

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

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

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

/* @group @variables */

[class*="m-category-hero-body"] {
--grid-template-columns: 1.5rem 1fr 1.5rem;
--grid-template-rows: 1.125rem auto .75rem auto 1fr 0;
--head-1-margin-bottom: .1875rem;
--head-1-font-size: clamp(1.875rem, 6.75vw, 3rem);
--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: 1rem;
--line-height: 1.5;
--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-category-hero-body"] {
--head-1-font-size: 3rem;
}

}

/* @end @variables */

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

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

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

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

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

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

[class*="m-category-hero-body"] {
box-sizing: border-box;
position: relative;
z-index: 2;
background-color: hsla(0, 0%, 100%, .975);
-webkit-backdrop-filter: blur(.125rem);
backdrop-filter: blur(.125rem);
text-transform: uppercase;
}

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