/* @group @m-timeline */

[class*="m-timeline"]  {
--head-4-font-size: 1.125rem;
--head-4-line-height: 1.66666667;
--head-4-color: var(--color-primary);
}

/* @end @m-timeline */

/* @group @m-timeline */

[class*="m-timeline"] {
display: grid;
grid-auto-flow: row;
gap: 1.125rem;
}

/* @end @m-timeline */

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

/* @group @m-timeline */

[class*="a-timeline-listing"] {
--timeline-listing-background-color: var(--color-secondary);
--sprite-icon-background-image: url('../img/sprite-svg.svg#icon-time');
--sprite-icon-background-size: 1.5rem 1.5rem;
}

[style*="--timeline: tertiar"] [class*="a-timeline-listing"] {
--timeline-listing-background-color: var(--color-white);
}

[class*="a-timeline-listing"]:not(:last-of-type) {
--timeline-listing-after-content: '';
}

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

[class*="a-timeline-listing"] {
--timeline-time-grid-column: 1 / span 6;
--timeline-detail-grid-column: 1 / span 6;
-timeline-time-grid-row: 1;
-timeline-detail-grid-row: 2;
}

[class*="a-timeline-listing"]:has([class*="a-timeline-media"]) {
--timeline-detail-grid-column: 1 / span 4;
--timeline-media-grid-column: 5 / span 2;
-timeline-media-grid-row: 2;
}

}

/* @end @m-timeline */

/* @group @a-timeline-listing */

[class*="a-timeline-listing"] {
position: relative;
display: grid;
grid-auto-flow: row;
grid-auto-columns: 1fr;
gap: 1.125rem;
margin-left: 2.25rem;
padding: 1.125rem;
background-color: var(--timeline-listing-background-color);
border-radius: .75rem;
}

[class*="a-timeline-listing"]:before {
content: '';
box-sizing: border-box;
position: absolute;
top: 1.5rem;
left: -2.25rem;
width: 1.5rem;
height: 1.5rem;
background-color: var(--color-primary);
-webkit-mask-image: var(--sprite-icon-background-image);
mask-image: var(--sprite-icon-background-image);
-webkit-mask-size: var(--sprite-icon-background-size);
mask-size: var(--sprite-icon-background-size);
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}

[class*="a-timeline-listing"]:after {
content: var(--timeline-listing-after-content);
box-sizing: border-box;
position: absolute;
top: 3rem;
bottom: -2.625rem;
left: -1.5rem;
width: 1px;
background-color: var(--color-primary);
}

[class*="a-timeline-hour"] {
grid-column: var(--timeline-time-grid-column);
grid-row: var(--timeline-time-grid-row);
}

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

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

/* @end @ma-timeline-listing */

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

/* @group @a-timeline-hour */

[class*="a-timeline-hour"] {
--font-family: var(--font-family-heading);
--font-size: 1.875rem;
--line-height: 1;
}

/* @end @a-timeline-hour */

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

/* @group @a-timeline-media */

[class*="a-timeline-media"],
[class*="a-timeline-media"] img {
border-radius: inherit;
}

[class*="a-timeline-media"] img {
display: block;
width: 100%;
height: auto;
}

/* @end @a-timeline-media */

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

/* @group @a-timeline-detail */

[class*="a-timeline-detail"] {
display: grid;
align-items: start;
align-content: start;
grid-auto-flow: row;
grid-auto-columns: 1fr;
gap: 1.125rem;
}

[class*="a-timeline-detail"]>li {
display: inherit;
grid-auto-flow: row;
gap: .375rem;
}

/* @end @a-timeline-detail */