.gallery-widget {
  background: #fff;
  padding: 32px 0 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gallery-widget .reviews-title {
  margin-bottom: 20px;
}

/* Reuse same structural classes as reviews so carousel layout matches */
.gallery-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  width: 100%;
  max-width: 1300px;
}

/* Image card */
.gallery-card {
  background: transparent;
  border-radius: 12px;
  padding: 0;
  width: 100%;
  max-width: 600px; /* Fixed width */
  height: 400px; /* Fixed height */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  transition: transform 0.35s cubic-bezier(.4,0,.2,1), opacity 0.35s cubic-bezier(.4,0,.2,1);
}
.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Ensure the entire image fits without being cut off */
  border-radius: 12px;
  display: block;
}


/* Carousel wrapper and controls (reuse styling similar to reviews) */
.carousel-flex { display: flex; align-items: center; justify-content: center; width: 100%; gap: 0; position: relative; overflow: hidden; }
.carousel-cards { display: flex; flex-wrap: nowrap; gap: 24px; justify-content: center; width: 100%; max-width: 1300px; transition: transform 0.35s cubic-bezier(.4,0,.2,1); }
.carousel-arrow-side { background: none; border: none; padding: 0 8px; display: flex; align-items: center; cursor: pointer; transition: opacity 0.2s; opacity: 1; height: 100%; z-index: 2; position: relative; align-self: center; }

/* Dots & arrows use existing reviews styles (reviews.css) so no duplication for colors needed */

/* Responsive */
@media (max-width: 900px) {
  .gallery-card { max-width: 48%; flex: 0 0 auto; }
  .carousel-cards { justify-content: flex-start; gap: 16px; }
}
@media (max-width: 600px) {
  .gallery-card { max-width: 100%; min-width: 0; flex: 0 0 100%; }
  .gallery-card img { height: 260px; }
  .carousel-cards .gallery-card:not(:first-child) { display: none; } /* show one on mobile */
}