:root {
    --swiper-theme-color: var(--color-primary-lt);
    --swiper-pagination-bullet-size: 16px;
    --swiper-pagination-bottom: 16px;
    --swiper-pagination-bullet-inactive-color: white;
    --swiper-pagination-bullet-inactive-opacity: 0.7;
    --swiper-pagination-bullet-horizontal-gap: 6px;
}

.swiper-slide::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent calc(var(--swiper-pagination-bullet-size) * 3));
}

.swiper-slide-active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    height: 3px;
    width: 0;

    background-color: var(--color-primary-lt);

    animation: progressBar 5.1s linear infinite;
}

@keyframes progressBar {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

.swiper-slide:hover::after {
    animation-play-state: paused;
}