/* @group @m-article-detail */

[class*="m-article-detail"] {
box-sizing: border-box;
position: relative;
display: grid;
grid-template-columns: .75rem 1fr .375rem 2.25rem .375rem auto .75rem;
grid-template-rows: .75rem .375rem 2.25rem .375rem 1fr auto .75rem;
}

[class*="a-article-favorite"] {
grid-column: 3 / 6;
grid-row: 2 / 5;
}

[class*="m-article-link"] {
grid-column: 1 / 8;
grid-row: 1 / 8;
}

/* @end @m-article-detail */

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

/* @group @variables */

[class*="m-article-link"] {
--article-budge-new-grid-column: 2 / 4;
--article-budge-new-grid-row: 2 / 4;
--article-ranking-grid-column: 3;
--article-ranking-grid-row: 3;
--article-media-grid-column: 2 / 7;
--article-media-grid-row: 2 / 6;
--article-category-grid-column: 3 / 6;
--article-category-grid-row: 5 / 7;
--article-label-grid-column: 3 / 6;
--article-label-grid-row: 8;
--article-outline-grid-column: 3 / 6;
--article-outline-grid-row: 10;
--article-info-grid-column: 3 / 6;
--article-info-grid-row: 12;
}

/* @end @variables */

/* @group @m-article-link */

[class*="m-article-link"] {
box-sizing: border-box;
position: relative;
display: grid;
grid-template-columns: .75rem .75rem .75rem 1fr .75rem .75rem .75rem;
grid-template-rows: .75rem .75rem 4.5rem 1fr minmax(2.25rem, 3rem) .375rem .375rem auto .375rem auto .75rem auto .75rem;
}

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

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

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

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

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

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

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

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

/* @end @m-article-link */

/* article-detail -------------------------------------------------------- */

/* @group @variables */

[class*="m-article-link"] {
--font-size: .875rem;
--line-height: 1.71428571;
--paragraph-line-height: var(--line-height);
/*--head-2-font-family: var(--font-family-heading); */
--head-2-font-size: 1.125rem;
--head-2-line-height: 1.66666667;
--head-2-font-weight: 200;
--head-2-font-variation-settings: "wght" 200;
/*--head-3-font-family: var(--font-family-heading); */
--head-3-font-size: 1.125rem;
--head-3-line-height: 1.66666667;
--head-3-font-weight: 200;
--head-3-font-variation-settings: "wght" 200;
}

[class*="m-article-link"] {
--entries-detail-color: var(--color-quinary);
--head-2-color: var(--color-quinary);
--head-3-color: var(--color-quinary);
}

[class*="m-article-link"]:hover,
[class*="m-article-link"]:focus {
--entries-detail-color: var(--color-premier);
--head-2-color: var(--color-premier);
--head-3-color: var(--color-premier);
}

[class*="m-article-link"]:active {
--entries-detail-color: var(--color-premier-active);
--head-2-color: var(--color-premier-active);
--head-3-color: var(--color-premier-active);
}

/* @end @variables */

/* @group @m-article-link */

[class*="m-article-link"] {
position: relative;
padding: var(--campaign-detail-padding);
box-shadow: var(--campaign-detail-box-shadow);
}

[class*="m-article-link"],
[class*="m-article-link"]:hover,
[class*="m-article-link"]:focus,
[class*="m-article-link"]:active {
background-color: var(--campaign-detail-background-color);
color: var(--campaign-detail-color);
}

[class*="a-article-logo"],
[class*="a-article-budge-new"] {
position: relative;
z-index: 11;
}

/* @end @m-article-link */

/* @group @m-article-link */

[class*="m-article-link"] {
position: relative;
z-index: 2;
transition: var(--transition);
}

[class*="m-article-link"]:before {
content: '';
position: absolute;
inset: 0;
/*top: 0;
right: 0;
bottom: 0;
left: 0;*/
box-shadow: 0 0 0 1px var(--color-very-light-gray), .375rem .375rem 1.125rem -.375rem hsla(220, 20%, 20%, .375);
opacity: 0;
transition: var(--transition);
}

[class*="m-article-link"]:hover:before,
[class*="m-article-link"]:focus:before {
opacity: 1;
}

/* @end @m-article-link */

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

/* @group @a-article-label */

[class*="a-article-label"] {
transition: inherit;
}

/* @end @a-article-label */

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

/* @group @variables */

[class*="a-article-category"] {
--font-size: .75rem;
--line-height: 1.5;
--paragraph-line-height: var(--line-height);
--font-weight: 300;
--font-variation-settings: "wght" 300;
--color: var(--color-premier);
}

/* @end @variables */

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

[class*="a-article-category"] {
box-sizing: border-box;
position: relative;
z-index: 2;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: .375rem;
min-height: 2.25rem;
padding: .375rem;
background-color: hsla(0, 0%, 100%, .975);
-webkit-backdrop-filter: blur(.125rem);
backdrop-filter: blur(.125rem);
}

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

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

/* @group @a-article-logo */

[class*="a-article-logo"] {
display: flex;
justify-content: center;
align-items: end;
padding-top: .75rem;
background-color: hsla(0, 0%, 100%, 1);
-webkit-backdrop-filter: blur(.125rem);
backdrop-filter: blur(.125rem);
transition: var(--transition);
}

[class*="a-article-logo"] img {
height: 2.25rem;
}

/* @end @a-article-logo */

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

/* @group @variables */

[class*="a-article-info-list"] {
--font-size: .875rem;
--line-height: 1.71428571;
--paragraph-line-height: var(--line-height);
--icon-width: var(--font-size);
--icon-height: var(--font-size);
--icon-background-color: currentColor;
}

/* @end @variables */