/* @group @variables */

[class*="m-related-item-list"] {
--grid-template-columns: repeat(1, 1fr);
--gap: 0;
--grid-push-right: -.75rem;
--grid-push-left: -.75rem;
}

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

[class*="m-related-item-list"] {
--grid-template-columns: repeat(2, 1fr);
}

}

/* @end @variables */

/* @group @variables */

[class*="m-related-item-list"] {
--head-3-font-size: 1rem;
--head-3-line-height: 1.5;
--head-3-font-weight: 300;
--head-3-font-variation-settings: "wght" 300;
--head-3-color: var(--color-black);
--head-4-font-size: .75rem;
--head-4-line-height: 1.5;
--head-4-font-weight: 300;
--head-4-font-variation-settings: "wght" 300;
--font-size: .875rem;
--line-height: 1.71428571;
--paragraph-line-height: var(--line-height);
}

/* @end @variables */

/* @group @m-column-grid */

[class*="m-related-item-list"] {
position: relative;
display: grid;
justify-content: var(--justify-content);
align-items: var(--align-items);
align-content: var(--align-content);
grid-template-columns: var(--grid-template-columns);
gap: var(--gap);
max-width: var(--grid-max-width);
margin-right: var(--grid-push-right);
margin-left: var(--grid-push-left);
}

/* @end @m-column-grid */

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

/* @group @variables */

[class*="m-related-item-link"] {
--grid-template-columns: 4.5rem 1fr;
--gap: .75rem;
--link-background-color: var(--color-premier-action-secondary);
--link-action-background-color: var(--color-premier-action-secondary);
--link-active-background-color: var(--color-premier-active-secondary);
}

/* @end @variables */

/* @group @m-related-item-link */

[class*="m-related-item-link"] {
display: grid;
justify-content: var(--justify-content);
align-items: var(--align-items);
align-content: var(--align-content);
grid-template-columns: var(--grid-template-columns);
grid-template-rows: var(--grid-template-rows);
gap: var(--gap);
}

/* @end @m-related-item-link */

/* @group @m-related-item-link */

[class*="m-related-item-link"] {
position: relative;
z-index: 2;
padding: .75rem;
transition: var(--transition);
}

[class*="m-related-item-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-related-item-link"]:hover:before,
[class*="m-related-item-link"]:focus:before {
opacity: 1;
}

/* @end @m-related-item-link */

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