.timeline-module{display:flex;flex-direction:column;gap:40px;margin:calc(var(--so-margin)*2) 0 0 0;padding-left:20%;.timeline-item{background-color:var(--so-color-sand);border-radius:24px;display:flex;flex-direction:column;gap:32px;max-width:990px;padding:40px;position:relative;@media screen and (min-width:900px){&.has-image{flex-direction:row}}.timeline-year{color:var(--so-color-sand);font-size:16px;left:-152px;position:absolute;top:50%;transform:translate(-100%);transition:opacity var(--so-transition-speed);&:after{aspect-ratio:1/1;background-color:var(--so-color-sand);border:4px solid #a292be;border-radius:100%;content:"";height:20px;left:calc(100% + 18px);position:absolute;top:50%;transform:translateY(-50%);width:20px;z-index:-1}}@media screen and (min-width:700px){&:not(:first-child):before{height:calc(50% + 10px);top:-5px}&:not(:first-child):before,&:not(:last-child):after{background-color:var(--so-color-sand);border-radius:24px;content:"";left:-124px;position:absolute;transition:opacity var(--so-transition-speed);width:1px;z-index:-1}&:not(:last-child):after{bottom:-35px;height:calc(50% + 18px)}}&.active-first:before,&.active-last:after,&:not(.active) .timeline-year,&:not(.active):after,&:not(.active):before{opacity:.6}&:not(.has-image){flex-direction:column;@media screen and (min-width:700px){max-width:60%}}@media screen and (min-width:700px){&:not(.has-image)+.timeline-item:not(.has-image){max-width:70%}}.timeline-image{flex:1;margin:-20px -20px 0;min-width:100%;@media screen and (min-width:900px){margin-bottom:-36px;margin-left:-36px;margin-right:0;margin-top:-36px;max-width:457px;min-width:unset}img{height:100%;width:100%;@media screen and (min-width:900px){aspect-ratio:118/100}border-radius:20px;display:block;object-fit:cover;object-position:center;overflow:hidden}}.timeline-content-container{align-self:center;flex:1;width:100%}.timeline-tag{background-color:var(--so-color-mauve);border-radius:8px;color:var(--so-color-marine);display:inline-block;font-size:16px;font-weight:500;line-height:1.3;margin-bottom:12px;padding:4px 6px;width:fit-content}&:nth-child(3n+2) .timeline-tag{background-color:var(--so-color-sunny)}&:nth-child(3n) .timeline-tag{background-color:var(--so-color-peach)}@media screen and (max-width:900px){.timeline-year{left:-90px!important}&:not(:first-child):before,&:not(:last-child):after{left:-62px!important}}@media screen and (max-width:700px){padding-bottom:24px;padding-left:24px;padding-right:24px;padding-top:24px;.timeline-year{left:0!important;padding-left:32px;position:absolute;top:-32px;transform:none;&:after{left:0!important}}.timeline-tag{margin-bottom:32px}}}@media screen and (max-width:700px){gap:78px;padding-left:0;padding-top:78px}}