/* Equal-width items; horizontal scrolling only when the row overflows. */
.home-image-gallery {
  --gallery-gap: 2%;
  --gallery-item-width: 23.5%; /* (100% - three 2% gaps) / 4 */
  padding-bottom: 5vw;
}
.home-image-gallery__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--gallery-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding-block: .5rem;
}
.home-image-gallery.is-carousel .home-image-gallery__track { scrollbar-width: none; }
.home-image-gallery.is-carousel .home-image-gallery__track::-webkit-scrollbar { display: none; }
.home-gallery-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }
.home-gallery-controls[hidden] { display: none; }
.home-gallery-controls button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: #49613b; color: #fff; font-size: 1.5rem; cursor: pointer; }
.home-gallery-controls button:disabled { opacity: .35; cursor: default; }
.home-gallery-controls button:focus-visible { outline: .125rem solid #d4af37; outline-offset: .25rem; }
.home-gallery-dots { display: flex; justify-content: center; align-items: center; gap: .25rem; }
.home-gallery-controls .home-gallery-dot { width: 1.5rem; height: 1.5rem; background: transparent; border-radius: 50%; }
.home-gallery-dot::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: #c7c7c7; }
.home-gallery-dot[aria-current="true"]::before { background: #111; }
.home-gallery-controls .home-gallery-pause { width: auto; height: auto; padding: .4rem .6rem; font: inherit; font-size: .75rem; background: transparent; color: #49613b; }
.home-image-gallery__item {
  flex: 0 0 var(--gallery-item-width);
  min-width: 0;
  scroll-snap-align: start;
}
/* Auto margins center a short row, and become zero for an overflowing row. */
.home-image-gallery__item:first-child { margin-inline-start: auto; }
.home-image-gallery__item:last-child { margin-inline-end: auto; }
.home-image-gallery__item img {
  display: block;
  width: 100%;
  max-width: 100%;
  object-fit: contain;
}
.home-image-gallery__track:focus-visible {
  outline: .125rem solid #49613b;
  outline-offset: .25rem;
}
@media (max-width: 1024px) {
  .home-image-gallery { --gallery-item-width: 32%; }
}
@media (max-width: 700px) {
  .home-image-gallery { --gallery-item-width: 49%; padding-bottom: 3rem; }
}