.aspect-ratio-21x9 {
  aspect-ratio: 21/9;
}

.aspect-ratio-16x9 {
  aspect-ratio: 16/9;
}

.aspect-ratio-1x1 {
  aspect-ratio: 1/1;
}

.swiper-vertical {
  max-height: 100vh;
}

.swiper-nav-standalone .swiper-button-prev, .swiper-nav-standalone .swiper-button-next {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: auto;
  height: auto;
  margin: 0;
}

.swiper-nav-standalone .swiper-button-prev:after, .swiper-nav-standalone .swiper-button-next:after {
  content: "";
}

.swiper-nav-custom .swiper-button-prev:after, .swiper-nav-custom .swiper-button-next:after {
  content: "";
}

/* Givefuly [slider] shortcode: carousel items may contain arbitrary Redactor HTML */
.givefuly-carousel .carousel-item .givefuly-carousel-slide-body {
  min-height: 12rem;
}
.givefuly-carousel .carousel-item .givefuly-carousel-slide-body img {
  width: 100%;
  height: auto;
  display: block;
}

/* Span full inner width of <main class="container ..."> (matches default site_shell + px-md-4) */
main.container .givefuly-carousel-bleed,
main.container-sm .givefuly-carousel-bleed,
main.container-md .givefuly-carousel-bleed,
main.container-lg .givefuly-carousel-bleed,
main.container-xl .givefuly-carousel-bleed,
main.container-xxl .givefuly-carousel-bleed {
  max-width: none;
  width: calc(100% + var(--bs-gutter-x, 1.5rem));
  margin-left: calc(-0.5 * var(--bs-gutter-x, 1.5rem));
  margin-right: calc(-0.5 * var(--bs-gutter-x, 1.5rem));
}

@media (min-width: 768px) {

  main.container.px-md-4 .givefuly-carousel-bleed {
    width: calc(100% + 3rem);
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

  main.container.px-md-5 .givefuly-carousel-bleed {
    width: calc(100% + 6rem);
    margin-left: -3rem;
    margin-right: -3rem;
  }
}

main.container-fluid .givefuly-carousel-bleed {
  width: calc(100% + var(--bs-gutter-x, 1.5rem));
  margin-left: calc(-0.5 * var(--bs-gutter-x, 1.5rem));
  margin-right: calc(-0.5 * var(--bs-gutter-x, 1.5rem));
}

.givefuly-carousel-bleed .givefuly-carousel,
.givefuly-carousel-bleed .carousel-inner,
.givefuly-carousel-bleed .carousel-item {
  width: 100%;
  max-width: none;
}