.image {
  position: relative;
  width: inherit;
  height: inherit;
  overflow: hidden;
}

.product-viewer,
.product-viewer * {
  box-sizing: border-box;
}

.product-viewer {
  padding: 25px;
}

.product-viewer__large-view-container {
  overflow: hidden;
}

.product-viewer__large-view {
  visibility: hidden;
  display: flex;
  transition: transform 400ms ease;
}

@media (width <= 500px) {
  .product-viewer {
    padding: 10px;
  }
}

.product-viewer img {
  width: 100%;
  max-width: 100%;
  -webkit-user-drag: none;
}

.product-viewer__large-view img {
  flex-shrink: 0;
  height: 100%;
}

.product-viewer__navigation {
  margin-top: 20px;
  position: relative;
}

.product-viewer__small-view-container {
  display: flex;
  justify-content: center;
  padding: 0 60px;
}

.product-viewer__small-view {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 5px 0;
}

.product-viewer__small-view img {
  min-width: 50px;
  width: auto;
  flex-shrink: 0;
  height: 50px;
  border: 1px solid #ddd;
  margin: 0 5px;
  cursor: pointer;
  transition: border 200ms ease;
}

.product-viewer__small-view img:hover {
  border-color: white;
}

.product-viewer__small-view img.active {
  border-color: white;
  box-shadow: 0 0 1px 1px rgba(255 255 255 / 80%);
}

.product-viewer__navigation button {
  background: none;
  color: white;
  outline: none;
  box-shadow: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  font-family: monospace;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-viewer__prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.product-viewer__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}

@media (width <= 500px) {
  .product-viewer__navigation svg {
    height: 32px;
  }
}

.product-viewer__navigation svg {
  fill: currentcolor;
}

.product-viewer .product-video {
  display: flex;
  align-items: center;
}

.product-viewer .product-video div video {
  width: 100%;
  max-width: 100%;
  height: 100%;
}

.product-viewer .image > div {
  flex: 0 0 100%;
}

.product-viewer .product-image {
  display: flex;
  align-items: center;
}