.rwd-side-gallery,
.rwd-side-gallery * {
  box-sizing: border-box;
}

.rwd-side-gallery {
  display: flex;
  align-items: stretch;
  gap: var(--rwd-gallery-gap, 18px);
  width: 100%;
  height: var(--rwd-gallery-height, 470px);
}

.rwd-side-gallery__main {
  flex: 0 0 var(--rwd-gallery-main-desktop, 82%);
  width: var(--rwd-gallery-main-desktop, 82%);
  min-width: 0;
  height: 100%;
  border-radius: var(--rwd-gallery-radius-main, 14px);
  overflow: hidden;
  background: #f4f4f4;
}

.rwd-side-gallery__main-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--rwd-gallery-fit, cover);
  object-position: center;
  border-radius: var(--rwd-gallery-radius-main, 14px);
  transition: opacity 180ms ease;
}

.rwd-side-gallery__main-img.is-changing {
  opacity: 0.35;
}

.rwd-side-gallery__thumbs-panel {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rwd-side-gallery__thumbs-viewport {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

.rwd-side-gallery__thumbs-track {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--rwd-gallery-gap, 18px);
  transition: transform 220ms ease;
  will-change: transform;
}

.rwd-side-gallery__thumb {
  display: block;
  flex: 0 0 calc((100% - ((var(--rwd-gallery-thumbs, 4) - 1) * var(--rwd-gallery-gap, 18px))) / var(--rwd-gallery-thumbs, 4));
  width: 100%;
  height: calc((100% - ((var(--rwd-gallery-thumbs, 4) - 1) * var(--rwd-gallery-gap, 18px))) / var(--rwd-gallery-thumbs, 4));
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--rwd-gallery-radius-thumb, 12px);
  overflow: hidden;
  cursor: pointer;
  background: transparent;
  opacity: 0.82;
  transition: opacity 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.rwd-side-gallery__thumb:hover,
.rwd-side-gallery__thumb.is-active {
  opacity: 1;
}

.rwd-side-gallery__thumb.is-active {
  box-shadow: 0 0 0 3px var(--rwd-gallery-active, #009bff);
}

.rwd-side-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--rwd-gallery-radius-thumb, 12px);
  pointer-events: none;
}

.rwd-side-gallery__arrow {
  flex: 0 0 28px;
  width: 100%;
  height: 28px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rwd-gallery-arrow, #009bff) 12%, transparent);
  color: var(--rwd-gallery-arrow, #009bff);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 160ms ease, background 160ms ease;
}

.rwd-side-gallery__arrow:hover {
  background: color-mix(in srgb, var(--rwd-gallery-arrow, #009bff) 20%, transparent);
}

.rwd-side-gallery__arrow.is-disabled,
.rwd-side-gallery__arrow[disabled] {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

.rwd-side-gallery__arrow-icon {
  display: block;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
}

.rwd-side-gallery__arrow--prev .rwd-side-gallery__arrow-icon {
  transform: translateY(2px) rotate(45deg);
}

.rwd-side-gallery__arrow--next .rwd-side-gallery__arrow-icon {
  transform: translateY(-2px) rotate(225deg);
}

@supports not (background: color-mix(in srgb, #000 10%, transparent)) {
  .rwd-side-gallery__arrow {
    background: rgba(0, 155, 255, 0.12);
  }
}

@media (max-width: 767px) {
  .rwd-side-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--rwd-gallery-mobile-gap, 10px);
    height: var(--rwd-gallery-mobile-height, 380px);
  }

  .rwd-side-gallery__main {
    flex: 0 0 var(--rwd-gallery-main-mobile, 76%);
    width: 100%;
    height: auto;
  }

  .rwd-side-gallery__thumbs-panel {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: auto;
    flex-direction: row;
    gap: 8px;
  }

  .rwd-side-gallery__thumbs-viewport {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
  }

  .rwd-side-gallery__thumbs-track {
    width: 100%;
    height: 100%;
    flex-direction: row;
    gap: var(--rwd-gallery-mobile-gap, 10px);
  }

  .rwd-side-gallery__thumb {
    flex: 0 0 calc((100% - ((var(--rwd-gallery-thumbs, 4) - 1) * var(--rwd-gallery-mobile-gap, 10px))) / var(--rwd-gallery-thumbs, 4));
    width: calc((100% - ((var(--rwd-gallery-thumbs, 4) - 1) * var(--rwd-gallery-mobile-gap, 10px))) / var(--rwd-gallery-thumbs, 4));
    height: 100%;
  }

  .rwd-side-gallery__arrow {
    flex: 0 0 28px;
    width: 28px;
    height: 100%;
    min-height: 42px;
  }

  .rwd-side-gallery__arrow--prev .rwd-side-gallery__arrow-icon {
    transform: translateX(2px) rotate(-45deg);
  }

  .rwd-side-gallery__arrow--next .rwd-side-gallery__arrow-icon {
    transform: translateX(-2px) rotate(135deg);
  }
}