/* @group Example
------------------------------------ */
.article-with-image { color: var(--timeline-text); }
.article-with-image h3 { color: var(--timeline-title); font-size: 2.8em; letter-spacing: 4.48px; line-height: 1.143em; margin: 0 0 5rem; }
.article-with-image h3 em { display: block; font-weight: 300; }
.article-with-image .img-box { height: 28rem; margin: 0 0 5.7rem; }
.article-with-image ul { margin: 0 0 5rem; }
.article-with-image small { display: block; }

.article-with-image .splide { margin: 0 0 5.7rem; position: relative; }
.article-with-image .splide::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 16.1rem; background: transparent linear-gradient(0deg, #1E1E22 0%, #1E1E2200 100%) 0% 0% no-repeat padding-box; opacity: .45; pointer-events: none; }
.article-with-image .splide .img-box { margin: 0; }
.article-with-image .splide__pagination { position: absolute; bottom: 3.3rem; margin: 0; z-index: 2; }
@media only screen
and (min-width : 961px) {
    .article-with-image .splide { margin: 0; }
    .article-with-image .img-box { height: 68rem; margin: 0; }
    .article-with-image article { padding-right: 0; }
    .article-with-image h3 { font-size: 3.6em; font-weight: 400; letter-spacing: 5.76px; line-height: 1.167em; margin: 0 0 3.8rem; }
    .article-with-image ul { margin: 0 0 3.2rem 3rem; }
    .article-with-image .splide__pagination { text-align: center; width: 100%; }
    .article-with-image .splide::after { height: 25.3rem; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 1920px) {
    .article-with-image .img-box { height: 85rem; }
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .article-with-image aside { padding: 0; }
    .article-with-image ul { margin-left: 2rem; }
}

/* @end */