/* ------------------------------ */
/* ------- Swiper Gallery ------- */
/* ------------------------------ */

.section > div:not(.section__title) + .section__gallery {
    padding-top: var(--spacing-10);
}

.swiper-container {
    overflow: hidden;
    padding-bottom: var(--spacing-6-5);
}

.gallery {
    position: relative;
}

.swiper-pagination {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
}

.swiper-pagination-bullet {
    width: 14px;
    height: 14px;
    background: var(--brand-border);
    border-radius: 50%;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: var(--brand-gradient);
}



.swiper-button {
    position: absolute;
    top: 0;
    height: calc(100% - var(--spacing-6-5));
    width: 46px;
}

.swiper-button.swiper-button-prev {
    left: -23px;
}

.swiper-button.swiper-button-next {
    right: -23px;
}

.swiper-button--inside {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    box-shadow: var(--box-shadow-2);

    background: var(--button-gradient);
    background-size: 200%;
    background-position: left center;
    transition: background 0.3s ease-in-out 0s;
}

.no-touchevents .swiper-button:hover .swiper-button--inside {
    background-position: right center;
}

.swiper-button svg {
    position: absolute;
    top: 50%;
    left: 50%;
}

.swiper-button.swiper-button-prev svg {
    transform: translate(-50%, -50%) rotate(90deg);
}

.swiper-button.swiper-button-next svg {
    transform: translate(-50%, -50%) rotate(-90deg);
}