.swiper {
    --swiper-pagination-color: var(--bs-primary, #222526);
    --swiper-navigation-color: var(--bs-primary, #222526);
    --swiper-pagination-bullet-inactive-color: var(--bs-secondary, #fcfcfc)
}

.swiper__image .swiper-slide {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    background-color: #fff;
    height: auto
}

.swiper__image .swiper-slide .image {
    grid-row: 1/-1;
    grid-column: 1/-1;
    position: relative;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle fill="none" stroke-opacity="1" stroke="%23003D33" stroke-width=".5" cx="100" cy="100" r="0"><animate attributeName="r" calcMode="spline" dur="2" values="1;80" keyTimes="0;1" keySplines="0 .2 .5 1" repeatCount="indefinite"></animate><animate attributeName="stroke-width" calcMode="spline" dur="2" values="0;25" keyTimes="0;1" keySplines="0 .2 .5 1" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" calcMode="spline" dur="2" values="1;0" keyTimes="0;1" keySplines="0 .2 .5 1" repeatCount="indefinite"></animate></circle></svg>') center center no-repeat
}

.swiper__image .swiper-slide .image:after {
    position: absolute;
    display: block;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, var(--overlay, 0))
}

.swiper__image .swiper-slide .text__wrapper {
    grid-row: 1/-1;
    grid-column: 1/-1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: var(--bs-secondary, #fff);
    text-shadow: 2px 2px 5px rgba(0, 20, 17, .4);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start
}

.swiper__image .swiper-slide .text__wrapper .content div {
    margin-top: 3rem
}

.swiper__image .swiper-slide .text__wrapper .content p:last-child {
    margin-bottom: 0
}

.swiper__image .swiper-slide .text__wrapper.hide {
    display: none !important
}

.swiper__multiimage .swiper-slide {
    width: auto
}

.swiper-button-next,
.swiper-button-prev {
    opacity: 0;
    transition: opacity .3s ease-in-out;
    text-shadow: 0 0 .5em rgba(0, 0, 0, .1);
    background-color: var(--bs-light);
    color: var(--bs-dark);
    border-radius: 50%;
    width: var(--swiper-navigation-size);
    height: var(--swiper-navigation-size)
}

.swiper-button-next:after,
.swiper-button-prev:after {
    --swiper-navigation-size: 22px
}

.swiper:hover .swiper-button-next,
.swiper:hover .swiper-button-prev {
    opacity: 1
}

.swiper__image .swiper-slide .text__wrapper.tl {
    align-items: flex-start
}

.swiper__image .swiper-slide .text__wrapper.tc {
    align-items: center
}

.swiper__image .swiper-slide .text__wrapper.tr {
    align-items: flex-end
}

.swiper__image .swiper-slide .text__wrapper.cl {
    justify-content: center
}

.swiper__image .swiper-slide .text__wrapper.cc {
    justify-content: center;
    align-items: center
}

.swiper__image .swiper-slide .text__wrapper.cr {
    justify-content: center;
    align-items: flex-end
}

.swiper__image .swiper-slide .text__wrapper.bl {
    justify-content: flex-end
}

.swiper__image .swiper-slide .text__wrapper.bc {
    justify-content: flex-end;
    align-items: center
}

.swiper__image .swiper-slide .text__wrapper.br {
    justify-content: flex-end;
    align-items: flex-end
}

.swiper__image .swiper-slide .text__wrapper .content {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: inherit;
    justify-content: inherit
}

.swiper__thumbs .swiper-slide {
    opacity: .66
}

.swiper-thumbs .swiper-slide-thumb-active {
    opacity: 1
}