.slider-timeline-wrapper {
    position: relative;
    overflow: hidden;
    padding: clamp(2.222rem, 1.577rem + 3.226vi, 4.444rem) 0;

    .wrapper {
        width: 100%;
        max-width: 1600px;
        margin: 0 auto;
        padding: 0 clamp(1.111rem, 0.789rem + 1.613vi, 2.222rem);

        .slider-timeline-headline {
            display: block;
            margin-bottom: clamp(1.111rem, 0.466rem + 3.226vi, 3.333rem);

            .headline {
                max-width: 1000px;
                margin: 0;
                color: #000000;
                font-family: "League Spartan";
                font-size: clamp(1.778rem, 1.455rem + 1.613vi, 2.889rem);
                font-weight: 800;
                line-height: 1.1;
            }
        }

        .slider-timeline-paging {
            position: relative;
            display: none;
            margin-bottom: clamp(2.222rem, 1.254rem + 4.839vi, 5.556rem);
            justify-content: space-between;
            gap: 10px;

            @media only screen and (min-width: 1024px) {
                display: flex;
            }

            &::before {
                content: '';
                position: absolute;
                left: -100vw;
                bottom: 0;
                width: 300vw;
                height: 1px;
                background: #CCCCCC;
            }

            .paging-button {
                position: relative;
                margin: 0;
                padding: 0 10px 10px 10px;
                color: #757575;
                font-size: clamp(0.778rem, 0.746rem + 0.161vi, 0.889rem);
                font-weight: 500;
                text-align: center;
                background: transparent;

                &::before {
                    content: '';
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    width: 1px;
                    height: 8px;
                    margin: 0 auto;
                    background: #CCCCCC;
                }

                &::after {
                     content: '';
                     position: absolute;
                     right: 50%;
                     bottom: 0;
                     width: 100vw;
                     height: 1px;
                     background: transparent;
                }

                &:hover {
                     color: #000;
                }

                &.active {
                    &::before,
                    &::after {
                        background: #258CCF;
                    }
                }
            }
        }

        .slider-timeline-years {
            position: relative;
            margin: 0 clamp(-2.222rem, -0.789rem + -1.613vi, -1.111rem) clamp(2.222rem, 1.254rem + 4.839vi, 5.556rem);

            @media only screen and (min-width: 1024px) {
                display: none;
                margin-left: 0;
                margin-right: 0;
            }

            &::before {
                 content: '';
                 position: absolute;
                 left: -100vw;
                 bottom: 0;
                 width: 300vw;
                 height: 1px;
                 background: #CCCCCC;
            }

            .swiper-slide {
                position: relative;
                margin: 0;
                padding: 0 10px 10px 10px;
                color: #757575;
                font-size: clamp(0.778rem, 0.746rem + 0.161vi, 0.889rem);
                font-weight: 500;
                text-align: center;
                background: transparent;
                border-bottom: 1px solid transparent;
                cursor: pointer;

                &::before {
                     content: '';
                     position: absolute;
                     right: 0;
                     bottom: 0;
                     left: 0;
                     width: 1px;
                     height: 8px;
                     margin: 0 auto;
                     background: #CCCCCC;
                }

                &::after {
                     content: '';
                     position: absolute;
                     right: 50%;
                     bottom: 0;
                     width: 100vw;
                     height: 1px;
                     background: transparent;
                }

                &:hover {
                     color: #000;
                }

                &.swiper-slide-active {
                    &::before,
                    &::after {
                         background: #258CCF;
                    }
                }
            }
        }

        .slider-timeline {
            overflow: hidden;

            .swiper-slide {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                gap: clamp(2.222rem, 1.577rem + 3.226vi, 4.444rem);
                opacity: 0 !important;

                &.swiper-slide-active {
                    opacity: 1 !important;
                 }

                @media only screen and (min-width: 1024px) {
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                }

                .image-wrapper {
                    @media only screen and (min-width: 1024px) {
                        order: 2;
                    }

                    .image {
                        position: relative;
                        width: 100%;
                        height: clamp(15.556rem, 12.007rem + 17.742vi, 27.778rem);

                        img {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            object-position: center;
                        }
                    }
                }

                .text-container {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    gap: 20px;

                    .text-top {
                        display: flex;
                        flex-direction: column;
                        gap: clamp(1.111rem, 0.789rem + 1.613vi, 2.222rem);

                        .title {
                            display: block;
                            margin: 0;
                            color: #000000;
                            font-family: "League Spartan";
                            font-size: clamp(1.222rem, 1.061rem + 0.806vi, 1.778rem);
                            font-weight: 800;
                            line-height: 1.1;
                        }

                        .text {
                            color: #7A7A7A;
                            font-size: clamp(0.889rem, 0.824rem + 0.323vi, 1.111rem);
                            line-height: 1.6;
                        }
                    }

                    .year {
                        color: #468ACA;
                        font-family: "League Spartan";
                        font-size: clamp(2.778rem, 1.971rem + 4.032vi, 5.556rem);
                        line-height: 1.2;
                        font-weight: 800;
                    }
                }
            }
        }

        .swiper-controls {
            position: relative;
            z-index: 5;
            display: flex;
            justify-content: flex-end;
            gap: 16px;

            @media only screen and (min-width: 1024px) {
                width: 50%;
                margin-top: -14px;
            }

            .prev,
            .next {
                display: flex;
                align-items: center;
                cursor: pointer;

                &:hover {
                    svg {
                        color: #258CCF;
                    }
                }

                svg {
                    color: #000000;
                }
            }

            .next {
                transform: rotate(180deg);
            }
        }
    }
}