/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

.swiper-container {
    --swiper-navigation-size: 40px;
    --swiper-navigation-color: var(--bs-black);
    --swiper-navigation-sides-offset: 20px;/* 10px; */
    --swiper-bs-gutter-y: 1rem;

    --bs-gutter-y: var(--swiper-bs-gutter-y);
    padding-top: var(--bs-gutter-y);
    padding-left: calc(var(--bs-gutter-x) * .25);
    padding-right: calc(var(--bs-gutter-x) * .25);
}

.swiper-wrapper {
    --bs-gutter-y: var(--swiper-bs-gutter-y);
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-inline: 0;
}

.swiper-slide {
    height: unset;
    min-width: 100%;
    max-width: 100%;
    margin-bottom: 1.25rem;
}
.swiper-slide > * {
    margin-bottom: 0;
    height: 100%;
}

.swiper-notification:empty {
    display: none;
}

.swiper-container:not(.swiper-container-initialized) .swiper-button {
    display: none;
}
.swiper-button {
    --bs-bg-opacity: .65;
    --bs-btn-disabled-color: var(--swiper-navigation-color);
    border: 1px solid var(--bs-tertiary) !important;
    width: var(--swiper-navigation-size);
    container-type: inline-size;
}
.swiper-button:hover {
    --bs-bg-opacity: 1;
    --bs-btn-hover-color: var(--bs-white);
    --bs-white-rgb: var(--bs-tertiary-variant-1-rgb);
}
.swiper-button:after {
    font-size: 55cqw;
    font-weight: 600;
}
.swiper-button-disabled {
    pointer-events: initial !important;
}

@media (pointer: fine) {
    .swiper-container.buttons-on-hover:not(:hover) {
        --swiper-navigation-sides-offset: calc(var(--swiper-navigation-size) * -1 - 2px);
    }
    .swiper-container.buttons-on-hover .swiper-button-prev {
        -webkit-transition: left .3s ease;
        transition: left .3s ease;
    }
    .swiper-container.buttons-on-hover .swiper-button-next {
        -webkit-transition: right .3s ease;
        transition: right .3s ease;
    }
}