.timeline__timeline {
    position: relative;

    &::after {
        position: absolute;
        top: clamp(calc(2.5rem + 20px), calc(2.875vw + 20px), calc(3.25rem + 20px));
        left: -4.17vw;
        content: "";
        display: block;
        width: 100vw;
        height: 1px;
        background-color: rgba(102, 102, 102, 1);
    }

    .swiper-button-prev,
    .swiper-button-next {
        position: absolute;
        top: -100%;
        right: 0;
        left: unset;
        min-width: 64px;
        min-height: 64px;
        border: 1px solid var(--wp--preset--color--white-text);
        color: var(--wp--preset--color--white-text);
        border-radius: 64px;
        transition: all 0.4s ease-in-out;

        &:hover {
            background-color: var(--wp--preset--color--white-text);
            color: var(--wp--preset--color--dark-text);
        }
    }

    .swiper-button-prev {
        right: 80px;
    }
}

@media only screen and (max-width: 1100px) {
    .timeline__timeline {
        position: relative;

        &::after {
            left: -11vw;
        }

        .swiper-button-prev,
        .swiper-button-next {
            top: unset;
            position: relative;
        }
        
        .swiper-button-prev {
            left: 0;
            top: 54px;    
        }

        .swiper-button-next {
            left: calc(100% - 64px);
        }    
    }
}