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

/* @group @variables */

[class*="o-article-hero"] {

--article-hero-grid-template-columns: var(--x-padding-left) 1fr 3fr var(--x-padding-right);
--article-hero-grid-template-rows: 1fr 1.5rem auto 1.5rem;

--article-hero-media-grid-column: 1 / 5;
--article-hero-media-grid-row: 1 ;
--article-hero-body-grid-column: 2 / 4;
--article-hero-body-grid-row: 3;
--article-hero-after-grid-column: 1 / 5;
--article-hero-after-grid-row: 1 / 5;

/*--article-hero-background-color: var(--color-quaternary); */
--article-hero-background-image: linear-gradient(75deg, var(--color-tertiary) 0%, var(--color-quaternary) 100%);
/*--article-hero-background-image: linear-gradient(-75deg, hsla(45, 80%, 90%, 1) 0%, var(--color-quaternary) 100%); */
/*--article-hero-background-image: radial-gradient(circle, hsla(45, 80%, 90%, 1) 0%, var(--color-quaternary) 50%); */

--head-1-font-family: var(--font-family-heading);
--head-1-font-size: clamp(1.5rem, 5.25vw, 1.875rem);
--head-1-line-height: 1.5;
--head-1-font-weight: 500;
--head-1-font-variation-settings: "wght" 500;
--head-1-color: var(--color-very-dark-gray);
--text-block-margin-bottom: 0;
}

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

[class*="o-article-hero"] {

--article-hero-grid-template-columns: var(--x-padding-left) 1fr 2.25rem 1fr var(--x-padding-right);
--article-hero-grid-template-rows: .75rem 1.5rem 1fr 1.5rem 1.5rem;

--article-hero-media-grid-column: 1 / 3;
--article-hero-media-grid-row: 1 / 6;
--article-hero-body-grid-column: 4;
--article-hero-body-grid-row: 3;
--article-hero-after-grid-column: 2 / 7;
--article-hero-after-grid-row: 2 / 6;

/*--head-1-font-size: 2.25rem;*/
--head-1-font-size: 1.875rem;
}

}

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

[class*="o-article-hero"] {
--article-hero-media-grid-column: 2;
--article-hero-before-grid-column: 1 / 2;
--article-hero-before-grid-row: 1 / 5;
}

}

/* @end @variables */

/* @group @o-article-hero */

[class*="o-article-hero"] {
position: relative;
z-index: 3;
display: grid;
place-items: center start;
display: grid;
grid-template-columns: var(--article-hero-grid-template-columns);
grid-template-rows: var(--article-hero-grid-template-rows);
}

[class*="o-article-hero"]:after {
grid-column: var(--article-hero-after-grid-column);
grid-row: var(--article-hero-after-grid-row);
}

[class*="o-article-hero"]:before {
grid-column: var(--article-hero-before-grid-column);
grid-row: var(--article-hero-before-grid-row);
}

[class*="a-article-category-primary"] {
grid-column: var(--article-hero-category-grid-column);
grid-row: var(--article-hero-category-grid-row);
}

[class*="m-mutual-bread-root"] {
grid-column: var(--article-hero-bread-grid-column);
grid-row: var(--article-hero-bread-grid-row);
}

[class*="m-article-hero-body"] {
grid-column: var(--article-hero-body-grid-column);
grid-row: var(--article-hero-body-grid-row);
}

[class*="a-article-hero-media"] {
grid-column: var(--article-hero-media-grid-column);
grid-row: var(--article-hero-media-grid-row);
}

[class*="a-article-share-hero"] {
grid-column: var(--article-share-hero-grid-column);
grid-row: var(--article-share-hero-grid-row);
}

/* @end @o-article-hero */

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

/* @group @o-article-hero */

[class*="o-article-hero"]:before,
[class*="o-article-hero"]:after {
position: relative;
z-index: -2;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--article-hero-background-color);
background-image: var(--article-hero-background-image);
}

[class*="o-article-hero"]:after {
content: '';
}

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

[class*="o-article-hero"]:before {
content: '';
}

}

/* @end @o-article-hero */

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

/* @group @variables */

[class*="a-article-category-primary"] {
--article-hero-category-top: 0;
--article-hero-category-left: 0;
--article-hero-category-padding: .375rem;
--article-hero-category-min-width: 6rem;
--article-hero-category-font-size: .625rem;
--article-hero-category-background-color: hsla(0, 0%, 100%, .9375);
}

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

[class*="a-article-category-primary"] {
--article-hero-category-top: 1.125rem;
--article-hero-category-left: 1.125rem;
--article-hero-category-padding: .5625rem;
--article-hero-category-font-size: .75rem;
--article-hero-category-background-color: hsla(0, 0%, 100%, .875);
}

}

/* @end @variables */

/* @group @a-article-category */

[class*="a-article-category-primary"] {
box-sizing: border-box;
position: absolute;
z-index: 3;
top: var(--article-hero-category-top);
left: var(--article-hero-category-left);
display: flex;
justify-content: center;
align-items: center;
min-width: var(--article-hero-category-min-width);
padding: var(--article-hero-category-padding);
background-color: var(--article-hero-category-background-color);
font-size: var(--article-hero-category-font-size);
color: var(--color-premier);
-webkit-backdrop-filter: blur(.125rem);
backdrop-filter: blur(.125rem);
}

/* @end @a-article-category */

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

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

[class*="a-article-hero-media"] {
position: relative;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

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

[class*="a-article-hero-media-secondary"] img {
object-position: top center;
}

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

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

/* @group @variables */

[class*="m-article-hero-body"] {
--content-block-gap-primary: 1.5rem;
--text-block-margin-bottom: 0;
}

/* @end @variables */

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

[class*="m-article-hero-body"] {
display: grid;
align-content: var(--content-block-align-content);
grid-template-columns: repeat(1, 1fr);
gap: var(--content-block-gap-primary);
}

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

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

/* @group @variables */

[class*="m-article-title"] {
/*--head-2-font-family: var(--font-family-heading); */
--head-1-font-size: 1.875rem;
--head-1-line-height: 1.2;
--head-1-font-weight: 150;
--head-1-font-variation-settings: "wght" 150;
--head-1-color: var(--color-black);
--font-size: 1.125rem;
--line-height: 1.66666667;
--paragraph-line-height: var(--line-height);
--font-weight: 400;
--font-variation-settings: "wght" 400;
--color: var(--color-black);
}

/* @end @variables */

/* @group @m-article-title */

[class*="m-article-title"] {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: .375rem;
}

/* @end @m-article-title */

/* @group @m-article-title */

[class*="m-article-title"] {
padding-bottom: calc(1.5rem - 1px);
border-bottom: 1px solid var(--color-gainsboro);
}

/* @end @m-article-title */

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

/* @group @variables */

[class*="m-article-heading-info"] {
--font-size: .875rem;
--line-height: 1.71428571;
--paragraph-line-height: var(--line-height);
--color: var(--color-very-dark-gray);
}

[class*="m-article-heading-info"] {
--gap: .75rem;
}

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

[class*="m-article-heading-info"] {
--gap: .375rem;
}

}

/* @end @variables */

/* @group @m-article-heading-info */

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

/* @group @m-backnumber-list */

[class*="m-article-heading-info"] {
position: relative;
display: grid;
align-items: center;
grid-template-columns: repeat(1, 1fr);
gap: var(--gap);
}

/* @end @m-article-list */

[class*="m-category-info"] {
grid-column: var(--category-info-grid-column);
grid-row: var(--category-info-grid-row);
}

[class*="m-post-date"] {
grid-column: var(--post-date-grid-column);
grid-row: var(--post-date-grid-row);
}

[class*="m-article-more-info"] {
align-self: var(--article-more-info-align-self);
grid-column: var(--article-more-info-grid-column);
grid-row: var(--article-more-info-grid-row);
}

[class*="m-share-list"] {
align-self: var(--share-list-align-self);
grid-column: var(--share-list-grid-column);
grid-row: var(--share-list-grid-row);
}

/* @end @m-article-heading-info */