.gallery h2 {
  font: var(--h2-font);
  font-size: 2.25rem;
  line-height: 2.25rem;
}
.gallery .carousel {
  overflow: hidden;
  position: relative;
}
.gallery .carousel .slides {
  max-width: none;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.gallery .carousel .slides li {
  list-style: none;
  position: relative;
}
.gallery .carousel .slides li.active .img-wrapper {
  padding-bottom: 84.7%;
  opacity: 1;
  -webkit-transition: var(--bezier);
  transition: var(--bezier);
}
@container main (max-width: 64rem) {
  .gallery .carousel .slides li.active .img-wrapper {
    padding-bottom: 85.855%;
  }
}
.gallery .carousel .slides li .img-wrapper {
  position: relative;
  height: 0;
  padding-bottom: 65.555%;
  -webkit-transition: var(--bezier);
  transition: var(--bezier);
}
@container main (max-width: 64rem) {
  .gallery .carousel .slides li .img-wrapper {
    padding-bottom: 70.855%;
  }
}
.gallery .carousel .slides li .img-wrapper img {
  -o-object-fit: cover;
     object-fit: cover;
  max-width: 100%;
  width: 100%;
  height: 100%;
  position: absolute;
}
.gallery .carousel .slides:not(:has(li:nth-child(3))) li {
  width: 100% !important;
}
.gallery .carousel button {
  position: absolute;
  top: 1.25rem;
  z-index: 99;
}
.gallery .carousel button.hide {
  opacity: 0.5;
}
.gallery .carousel button.next {
  right: 0px;
}
.gallery .carousel button.prev {
  right: 4.375rem;
}
.gallery .carousel button.prev span:after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}