/* @group Story Box
------------------------------------ */
.story-box .box { color: var(--timeline-text); }
.story-box .link-circle { color: var(--timeline-title); margin-left: auto; display: flex; justify-content: flex-end; width: 100%; }
.story-box .link-circle i svg { stroke: var(--timeline-title); }
.story-box .img-box { height: 22rem; }

.story-box time { font: italic 500 1.4em / 1.429em var(--bilo-font); letter-spacing: 2.24px; margin: 0 0 .8rem; }
.story-box h2 { font-size: 3.6em; font-style: italic; letter-spacing: 5.76px; line-height: 1.167em; margin: 0 0 1rem; text-transform: uppercase; }
@media only screen
and (min-width : 961px) {
    .story-box .img-box { height: 31.8rem; margin: 0 0 1.5rem; }
    .story-box h2 { max-width: 45.7rem; }
    .story-box .link-circle { margin-top: -6rem; }
    .story-box .link-circle i { margin-right: 3rem; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .story-box { color: var(--title-light); padding: 0 1.2rem; }   
    .story-box .box { color: var(--title-light); }   
    .story-box .img-box { width: calc(100% + 2.4rem); margin-left: -1.2rem; }
    .story-box .img-box::after { content: ''; top: 0; left: 0; height: 100%; width: 100%; background: linear-gradient(180deg, rgba(77,94,87,0) 0%, rgba(77,94,87,1) 100%); position: absolute; }
    .story-box h2 { margin-top: -8.2rem; z-index: 3; position: relative; max-width: 90%; }
}

/* @end */