:root {
    --swiper-theme-color: var(--blue-400);

    --swiper-pagination-bullet-inactive-color: transparent;
    --swiper-pagination-bullet-size: 1rem;
    --swiper-pagination-bullet-width: 1rem;
    --swiper-pagination-bullet-height: 1rem;
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-navigation-top-offset: calc(100% + var(--swiper-navigation-size) + .75rem);
    /* --swiper-pagination-bottom: calc((var(--swiper-navigation-size) + .75rem + var(--swiper-pagination-bullet-height)) * -1) */
    --swiper-pagination-bottom: unset;
    --swiper-pagination-top: calc(100% + var(--swiper-navigation-size) + 1.025rem);

    --swiper-navigation-size: 1.2rem;
    --swiper-navigation-top-offset: calc(100% + var(--swiper-navigation-size) + .75rem);
    --swiper-navigation-sides-offset: calc(50% - (var(--swiper-navigation-size) * 27 / 44 + 1.25rem));
}

@media screen and (min-width: 64rem) {

    :root {
        --swiper-navigation-top-offset: calc(100% + var(--swiper-navigation-size) + 1.5rem);
    --swiper-navigation-sides-offset: calc(50% - (var(--swiper-navigation-size) * 27 / 44 + 1.25rem) * 3);
    }
}

.swiper-container {
    position: relative;
}

.swiper-pagination {
    height: var(--swiper-navigation-size);
}

.swiper-pagination-bullet {
    border: 1px solid var(--swiper-theme-color);
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--swiper-theme-color);
}