.timeline-element {
    display: flex;
    flex-direction: row;
    align-items: stretch;

    overflow: hidden;
    z-index: 1;
}

.timeline-wrapping-div {
    display: flex;
    flex-direction: row;
    margin: 2rem 0
}

.timeline-image-wrapper {
    display: flex;
}

.timeline-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.timeline-body-wrapper {
    display: flex;
    flex-direction: column;
}

.headline-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.headline-wrapper h2,
.headline-wrapper h3,
.headline-wrapper h4,
.headline-wrapper h5,
.headline-wrapper h6 {
    margin-bottom: 1rem;
}

.post-date-wrapper {
    font-size: 0.9em;
    align-self: flex-end;
}
.post-date-range-wrapper {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-content: center;
}
.timeline-content {
    font-size: 1em;

}

.timeline-button span.sr-only {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

.timeline-wrapper {
    position: relative;
    padding: 3rem 0;
    z-index: 0;
    view-timeline-name: --timeline-scroll;
    view-timeline-axis: block;
}

.timeline-wrapper.left {}

/* Timeline vertical line */
.timeline-line-outer {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;

    z-index: 0;
}

.timeline-line-outer .timeline-line {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0%;
}
/* Timeline line scroll animation — tied to the timeline section's viewport progress */
.timeline-line-outer .timeline-line {
  animation: timeline-grow linear;
  animation-timeline: --timeline-scroll;
  animation-range: entry 0% exit 100%;
}

@keyframes timeline-grow {
  from { height: 0%; }
  to   { height: 100%; }
}

/* Fallback for browsers without view-timeline support */
@supports not (animation-timeline: view()) {
  .timeline-line-outer .timeline-line {
    height: 100%;
  }
}


/* Timeline dots */

.timeline-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

/* Timeline elements positioning */
.timeline-element {
    position: relative;
    width: 45%;
    z-index: 1;
}

.timeline-element.left {
    margin-right: auto;
}

.timeline-element.right {
    margin-left: auto;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .timeline-element{
        gap:1rem;
    }

    .timeline-line {
        left: 20px;
    }

    .timeline-dot-wrapper {
        left: 20px;
    }

    .timeline-element {
        width: calc(100% - 40px);
        margin-left: 40px !important;
        display: flex;
        flex-direction: column;
    }

    .post-date-wrapper {
        align-self: flex-start;
    }
}

.timeline-dot-wrapper {
    position: relative;
    left: 50%;
    transform: translate(calc(-50% + 1px), 21px);
    z-index: 2;
    width: 21px;
}

/* Match dot position with corresponding timeline element */


.timeline-dot {
    width: 21px;
    height: 21px;
    border-radius: 50%;
}

@media (max-width: 768px) {
    .timeline-line {
        left: 20px;
    }

    .timeline-dot-wrapper {
        left: 20px;
    }
}

@media screen and (min-width: 768px) {
    .timeline-image-wrapper {
        position: relative;
        overflow: hidden;
        flex: 0 0 auto;
        width: 35%;
        max-width: 400px;
    }

    .timeline-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        max-width: none;
    }
}
/* Animations */
@keyframes drawLine {
    from {
        height:0;
    }
    to {
        height:100%;
    }
}

@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

{# These are the easing options for the animations. #}
[data-aos][data-aos][data-aos-easing=linear], body[data-aos-easing=linear] [data-aos] {
    transition-timing-function: cubic-bezier(.25, .25, .75, .75)
  }
  [data-aos][data-aos][data-aos-easing=ease], body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
  }
  [data-aos][data-aos][data-aos-easing=ease-in], body[data-aos-easing=ease-in] [data-aos] {
    transition-timing-function: ease-in
  }
  [data-aos][data-aos][data-aos-easing=ease-out], body[data-aos-easing=ease-out] [data-aos] {
    transition-timing-function: ease-out
  }
  [data-aos][data-aos][data-aos-easing=ease-in-out], body[data-aos-easing=ease-in-out] [data-aos] {
    transition-timing-function: ease-in-out
  }
  [data-aos][data-aos][data-aos-easing=ease-in-back], body[data-aos-easing=ease-in-back] [data-aos] {
    transition-timing-function: cubic-bezier(.6, -.28, .735, .045)
  }
  [data-aos][data-aos][data-aos-easing=ease-out-back], body[data-aos-easing=ease-out-back] [data-aos] {
    transition-timing-function: cubic-bezier(.175, .885, .32, 1.275)
  }
  [data-aos][data-aos][data-aos-easing=ease-in-out-back], body[data-aos-easing=ease-in-out-back] [data-aos] {
    transition-timing-function: cubic-bezier(.68, -.55, .265, 1.55)
  }
  [data-aos][data-aos][data-aos-easing=ease-in-sine], body[data-aos-easing=ease-in-sine] [data-aos] {
    transition-timing-function: cubic-bezier(.47, 0, .745, .715)
  }
  [data-aos][data-aos][data-aos-easing=ease-out-sine], body[data-aos-easing=ease-out-sine] [data-aos] {
    transition-timing-function: cubic-bezier(.39, .575, .565, 1)
  }
  [data-aos][data-aos][data-aos-easing=ease-in-out-sine], body[data-aos-easing=ease-in-out-sine] [data-aos] {
    transition-timing-function: cubic-bezier(.445, .05, .55, .95)
  }
  [data-aos][data-aos][data-aos-easing=ease-in-quad], body[data-aos-easing=ease-in-quad] [data-aos] {
    transition-timing-function: cubic-bezier(.55, .085, .68, .53)
  }
  [data-aos][data-aos][data-aos-easing=ease-out-quad], body[data-aos-easing=ease-out-quad] [data-aos] {
    transition-timing-function: cubic-bezier(.25, .46, .45, .94)
  }
  [data-aos][data-aos][data-aos-easing=ease-in-out-quad], body[data-aos-easing=ease-in-out-quad] [data-aos] {
    transition-timing-function: cubic-bezier(.455, .03, .515, .955)
  }
  [data-aos][data-aos][data-aos-easing=ease-in-cubic], body[data-aos-easing=ease-in-cubic] [data-aos] {
    transition-timing-function: cubic-bezier(.55, .085, .68, .53)
  }
  [data-aos][data-aos][data-aos-easing=ease-out-cubic], body[data-aos-easing=ease-out-cubic] [data-aos] {
    transition-timing-function: cubic-bezier(.25, .46, .45, .94)
  }
  [data-aos][data-aos][data-aos-easing=ease-in-out-cubic], body[data-aos-easing=ease-in-out-cubic] [data-aos] {
    transition-timing-function: cubic-bezier(.455, .03, .515, .955)
  }
  [data-aos][data-aos][data-aos-easing=ease-in-quart], body[data-aos-easing=ease-in-quart] [data-aos] {
    transition-timing-function: cubic-bezier(.55, .085, .68, .53)
  }
  [data-aos][data-aos][data-aos-easing=ease-out-quart], body[data-aos-easing=ease-out-quart] [data-aos] {
    transition-timing-function: cubic-bezier(.25, .46, .45, .94)
  }
  [data-aos][data-aos][data-aos-easing=ease-in-out-quart], body[data-aos-easing=ease-in-out-quart] [data-aos] {
    transition-timing-function: cubic-bezier(.455, .03, .515, .955)
  }
  [data-aos^=fade][data-aos^=fade] {
  opacity: 0;
  transition-property: opacity, transform
}
[data-aos^=fade][data-aos^=fade].aos-animate {
  opacity: 1;
  transform: translateZ(0)
}
[data-aos=fade-right] {
  transform: translate3d(-100px, 0, 0)
}
[data-aos=fade-left] {
  transform: translate3d(100px, 0, 0)
}
[data-aos^=slide][data-aos^=slide] {
  transition-property: transform
}
[data-aos^=slide][data-aos^=slide].aos-animate {
  transform: translateZ(0)
}
[data-aos=slide-right] {
  transform: translate3d(-100%, 0, 0)
}
[data-aos=slide-left] {
  transform: translate3d(100%, 0, 0)
}