<style>
.gallery {
  max-width: 400px;
  position: relative;
  z-index: 5;
}

.main-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  background-color: #fff;
  margin-bottom: 5px;
  border: 1px solid #bdbdbd;
  border-radius: 8px;
}

.main-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 1;
  transition: opacity 0.75s ease-in-out, transform 0.1s ease;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0, 0) scale(1);
  transform-origin: top left;
}

.main-image img.fading {
  opacity: 0;
}

.main-image.zoom img {
  cursor: zoom-in;
}

.thumbnails {
  display: flex;
  gap: 5px;
  justify-content: flex-start;
}

.thumbnail {
  flex: 1;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  border-radius: 8px;
  transition: opacity 0.2s, border-color 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border: 1px solid #bdbdbd;
}

.thumbnail .thumb-inner {
  width: 100%;
  height: 100%;
  opacity: 0.3;
  display: flex;
  justify-content: center;
  align-items: center;
}

.thumbnail.active .thumb-inner {
  opacity: 1;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 8px;
  border: none;
}

.thumbnail.empty {
  visibility: hidden;
}

.thumbnail:hover .thumb-inner {
  opacity: 1;
}

.thumbnail.active {
  border-color: #7eba27;
}
</style>