/* @group @variables */

[class*="m-access-info"] {
--font-size: .875rem;
--line-height: 1.71428571;
--link-color: var(--color-white);
--link-action-color: var(--color-white);
--link-active-color: var(--color-white-action);
--link-border-color: var(--color-white-active);
--link-action-border-color: var(--color-white-action);
--link-active-border-color: var(--color-white-active);
}

[class*="m-access-info"] dt {
--font-weight: var(--font-weight-bold);
}

/* @end @variables */

/* @group @m-access-info */

[class*="m-access-info"] {
display: grid;
align-content: start;
grid-template-columns: auto 1fr;
}

[class*="m-access-info"] dt,
[class*="m-access-info"] dd {
padding-block: .75rem;
box-shadow: 0 1px 0 0 hsl(220deg 5% 25%), inset 0 1px 0 0 hsl(220deg 5% 25%);
}

[class*="m-access-info"] dt {
padding-right: 3.75rem;
padding-left: 1.5rem;
}

[class*="m-access-info"] dd {
padding-right: 1.5rem;
}

/* @end @m-access-info */

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

/* @group @variables */

[class*="m-access-detail"] {
--head-3-font-size: 1.25rem;
--head-3-color: var(--color-text);
--color: var(--color-text);
}

/* @end @variablese */

/* @group @m-access-detail */

[class*="m-access-detail"] {
display: grid;
grid-auto-flow: row;
gap: .75rem;
padding: .75rem;
background-color: var(--color-white);
border-radius: .25rem;
}

[class*="m-access-detail"] h3 {
padding-bottom: calc(.75rem - 1px);
border-bottom: 1px solid var(--border-color);
}

/* @end @m-access-detail */

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

/* @group @variables */

[class*="m-access-transportation"] {
--head-3-font-size: 1.25rem;
--head-4-font-size: 1rem;
--font-size: 1rem;
--color: var(--color-text);
}

/* @end @variables */

/* @group @m-access-transportation */

[class*="m-access-transportation"] {
align-self: start;
display: grid;
align-items: start;
gap: 1.75rem;
}

[class*="a-access-transportation"] {
display: grid;
gap: .75rem;
padding: .75rem;
background-color: var(--color-white);
}

/* @end @m-access-transportation */

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

/* @group @variables */

[class*="m-access-transportation"] {
--unordered-list-background-image: url('../img/sprite-svg.svg#icon-arrow-right');
--unordered-list-padding-left: 1rem;
--unordered-list-background-position: 0 .5625rem;
--unordered-list-background-size: .5rem .5rem;
}

[class*="m-access-detail"] {
--unordered-list-background-image: url('../img/sprite-svg.svg#icon-arrow-right');
--unordered-list-padding-left: 1rem;
--unordered-list-background-position: 0 .5625rem;
--unordered-list-background-size: .5rem .5rem;
}

/* @end @variables */

/* @group @m-content-list */

:where([class*="m-access-transportation"] ul:not([class])),
:where([class*="m-access-detail"] ul:not([class])) {
position: relative;
z-index: 2;
display: grid;
grid-auto-columns: 1fr;
gap: .375rem;
align-content: start;
}

:where([class*="m-access-transportation"] ul:not([class]))>li,
:where([class*="m-access-detail"] ul:not([class]))>li {
padding-left: var(--unordered-list-padding-left);
background-image: var(--unordered-list-background-image);
background-position: var(--unordered-list-background-position);
background-repeat: no-repeat;
background-size: var(--unordered-list-background-size);
}

/* @end @m-content-list */

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

/* @group @variables */

:where(ol:not([class])) {
--ordered-list-detail-padding-left: 1.875rem;
--ordered-list-detail-counter-width: 1.125rem;
}

:where(ol:not([class])):has(:nth-child(n+10)) {
--ordered-list-detail-padding-left: 2.25rem;
--ordered-list-detail-counter-width: 1.6875rem;
}

/* @end @variables */

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

:where([class*="m-access-detail"] ol:not([class])) {
position: relative;
display: grid;
grid-auto-flow: row;
gap: .375rem;
align-content: start;
counter-reset: li-entry;
}

:where(ol:not([class]))>li {
position: relative;
counter-increment: li-entry;
padding-left: var(--ordered-list-detail-padding-left);
}

:where([class*="m-access-detail"] ol:not([class]))>li:before {
box-sizing: border-box;
content: counter(li-entry)'.';
position: absolute;
top: 0;
left: 0;
display: grid;
width: var(--ordered-list-detail-counter-width);
speak: none;
text-align: right;
}

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