.custom-timeline-swiper {
    position: relative;
    width: 100%;
    margin-top: min(5em,5vw);
    & .swiper{
        width: 100%;
        overflow: visible;
        & .swiper-wrapper {
            position: relative;
            &::before {
                position: absolute;
                left: 0;
                width: 100%;
                height: 1px;
                content: '';
                top: calc(50% - .5px);
                background-color: currentColor;
                box-shadow: 0 0 0 100vw currentColor;
                clip-path: inset(0 -100vw round 0);
            }
            & .timeline-item {
                position: relative;
                opacity: 0;
                display: grid;
                aspect-ratio: 1/1;
                text-align: center;
                transition: all .3s;
                justify-content: center;
                align-content: flex-start;
                &:is(.pos-bottom) {align-content: flex-end;}
                & .timeline-content {
                    position: relative;
                    top: 0;
                    bottom: 0;
                    width: 100%;
                }
                &:has( ~ .swiper-slide-active) {
                    opacity: .7;
                    filter: grayscale(.6);
                }
                &.swiper-slide-active {
                    opacity: 1;
                    & ~ .timeline-item {
                        opacity: .7;
                        filter: grayscale(.6);
                    }
                }
                & .timeline-dot {
                    position: absolute;
                    width: .8em;
                    height: .8em;
                    transform: initial;
                    border-radius: 50%;
                    transition: all .3s;
                    top: calc(50% - .4em);
                    left: calc(50% - .4em);
                    border: 1px solid var(--cLWhite);
                    background-color: var(--cLPrimaryBlue);
                    &:is(.swiper-slide-active  &) {scale: 1.1;}
                }
                & .timeline-desc {
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }
            }
        }
    }
    & .pagination {
        margin-top: min(5em,5vw);
        & .progress {
            position: relative;
            margin-block: auto;
            width: min(150px,30vw);
            background-color: currentColor;
        }
        & .current-date {margin-block: auto;}
    }
}