/* counter-list --------------------------------------------------------*/

/* @group @variables */

:root {
--counter-list-gap: .375rem;
--counter-list-marker-spacing: 2.25rem;
--counter-list-line-height: 1.875rem;
}

/* @end @variables */

/* @group @m-counter-list */

[class*="m-counter-list"],
[class*="m-article-body"] ol {
position: relative;
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: var(--counter-list-gap);
align-content: start;
counter-reset: li-entry;
}

[class*="m-counter-list"]>li,
[class*="m-article-body"] ol>li {
position: relative;
min-height: var(--counter-list-line-height);
padding-left: var(--counter-list-marker-spacing);
position: relative;
counter-increment: li-entry;
}

[class*="m-counter-list"]>li:before,
[class*="m-article-body"] ol>li:before {
box-sizing: border-box;
content: counter(li-entry);
position: absolute;
top: 0;
left: 0;
display: grid;
place-items: var(--place-items-center-primary);
width: var(--counter-list-line-height);
height: var(--counter-list-line-height);
background-color: var(--color-brand);
border-radius: 50%;
font-size: var(--counter-list-font-size-primary);
line-height: var(---counter-list-line-height);
color: var(--color-white);
speak: none;
}

/* @end @m-counter-list */