#msGallery {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

#msGallery > a {
  display: flex;
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #e4dbcd;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

#msGallery > a:first-child,
#msGallery > a.is-active {
  order: -1;
  flex: 0 0 100%;
  width: 100%;
  height: min(470px, 58vw);
  min-height: 260px;
  border-color: #efe3d1;
}

#msGallery.has-interaction > a:first-child:not(.is-active) {
  order: 0;
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  min-height: 0;
}

#msGallery > a img,
#msGallery > a:first-child img,
#msGallery > a.is-active img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#msGallery > a:not(.is-active):hover,
#msGallery > a:not(.is-active):focus-visible {
  border-color: #c47632;
}

#msGallery > a.is-active {
  cursor: zoom-in;
}

#msGallery .product-gallery-controls {
  order: 2;
  display: flex;
  width: 100%;
  justify-content: flex-end;
  gap: 8px;
}

#msGallery .product-gallery-controls button {
  width: 36px;
  height: 36px;
  border: 1px solid #e4dbcd;
  border-radius: 50%;
  background: #fff;
  color: #a3541d;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

#msGallery .product-gallery-controls button:hover,
#msGallery .product-gallery-controls button:focus-visible {
  border-color: #c47632;
  background: #fbf4ea;
}

@media (max-width: 600px) {
  #msGallery > a:first-child,
  #msGallery > a.is-active {
    height: min(340px, 80vw);
    min-height: 220px;
  }

  #msGallery > a,
  #msGallery.has-interaction > a:first-child:not(.is-active) {
    flex-basis: 62px;
    width: 62px;
    height: 62px;
  }
}