/* Wrapper */
.nvgal-wrap { width: 100%; }

/* Main slider (active/big image) */
.nvgal-main {
  width: 100%;
  background: #F3F3F3; /* behind main image */
  overflow: hidden;
  margin-bottom: 20px; /* space between main image and thumbnails */
}

.nvgal-main .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;       /* allow slide to match container */
}

.nvgal-main .swiper-slide img {
  width: auto;        /* scale according to image ratio */
  max-width: 100%;    /* prevent horizontal overflow */
  height: 100%;       /* fill container height */
  object-fit: contain; /* main image contain */
  background: #F3F3F3;
}

/* Heights for main image */
@media (max-width: 767px) {
  .nvgal-main { height: 90vw; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .nvgal-main { height: 45vw; }
}
@media (min-width: 1025px) {
  .nvgal-main { height: 555px; }
}

/* Thumbnails slider */
.nvgal-thumbs {
  display: flex;
  gap: 6px; /* space between thumbs */
}

.nvgal-thumbs .swiper-slide {
  width: 51px !important;
  height: 62px !important;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid transparent;
}

.nvgal-thumbs .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* all thumbnails cover */
  background: #F3F3F3;
}

.nvgal-thumbs .swiper-slide-thumb-active img {
  border: 2px solid #000; /* active thumbnail border */
}