.cb-slider-timeline {
    position: relative;

    .slider-timeline-slides {
        .swiper-slide {
            padding-block-end: 5rem;

            .wrapper-desktop {
                width: 100%;
            }

            .slider-timeline-range {
                display: inline-block;
                margin-block-end: 1rem;
                padding: 0 5px;
                font-size: 20px;

                &.background-color-green {
                    background-color: var(--color-green);
                }

                &.background-color-blue {
                    background-color: var(--color-blue);
                }

                &.background-color-pink {
                    background-color: var(--color-pink);
                }

                &.background-color-orange {
                    background-color: var(--color-orange);
                }

                &.background-color-dark {
                    background-color: var(--color-dark);
                }
            }

            .slider-timeline-title {
                margin-block-end: 1.5rem;
                font-size: var(--h1-fontsize);
                line-height: 1.1;
                hyphens: auto;
            }

            .slider-timeline-text {
                position: relative;
            }

            .slider-timeline-images {
                position: relative;

                img {
                    opacity: 1;
                }
            }
        }
    }

    .swiper-buttons {
        justify-content: flex-end;
        margin-block-start: 1rem;

        .swiper-button-prev, .swiper-button-next {
            position: relative;
            top: 0;
        }
    }

    .slider-timeline-timeline {
        display: flex;
        flex-flow: row;
        justify-content: space-between;
        place-items: center;
        gap: 1rem;

        .swiper-scrollbar {
            flex: 1;
            background-color: var(--color-white);
            overflow: hidden;

            &.background-color-green {
                .swiper-scrollbar-drag {
                    background-color: var(--color-green);

                    &::before {
                        background-color: var(--color-green);
                    }
                }
            }

            &.background-color-blue {
                .swiper-scrollbar-drag {
                    background-color: var(--color-blue);

                    &::before {
                        background-color: var(--color-blue);
                    }
                }
            }

            &.background-color-pink {
                .swiper-scrollbar-drag {
                    background-color: var(--color-pink);

                    &::before {
                        background-color: var(--color-pink);
                    }
                }
            }

            &.background-color-orange {
                .swiper-scrollbar-drag {
                    background-color: var(--color-orange);

                    &::before {
                        background-color: var(--color-orange);
                    }
                }
            }

            &.background-color-dark {
                .swiper-scrollbar-drag {
                    background-color: var(--color-dark);

                    &::before {
                        background-color: var(--color-dark);
                    }
                }
            }

            .swiper-scrollbar-drag {
                &::before {
                    content: '';
                    position: absolute;
                    display: block;
                    width: 5000px;
                    height: 5px;
                    right: 0;
                    border-radius: 50px;
                }
            }
        }
    }
}

@media (max-width: 1199px) {
    .cb-slider-timeline {
        .slider-timeline-slides .swiper-slide {
            .slider-timeline-title {
                font-size: 48px;
            }
        }
    }
}

@media (max-width: 991px) {
    .cb-slider-timeline {
        .slider-timeline-slides .swiper-slide {
            padding-block-end: 1rem;
        }
    }
}

@media (max-width: 767px) {
    .cb-slider-timeline {
        .slider-timeline-slides .swiper-slide {
            .slider-timeline-title {
                font-size: 32px;
            }
        }
    }
}


@media (max-width: 575px) {
    .cb-slider-timeline {
        .slider-timeline-timeline {
            [class*="slider-timeline-description-"] {
                display: none;
            }
        }
    }
}