.acf-thumbnail-gallery {
  display: flex;
  width: 100%;
}

.acf-thumbnail-gallery-bottom {
  flex-direction: column;
}

.acf-thumbnail-gallery-left {
  flex-direction: row-reverse;
  align-items: flex-start;
}

.acf-thumbnail-gallery-right {
  flex-direction: row;
  align-items: flex-start;
}

.acf-thumbnail-gallery-main {
  width: 100%;
  flex: 1;
}

.acf-thumbnail-gallery-main-link {
  display: block;
}

.acf-thumbnail-gallery-main-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.acf-thumbnail-gallery-thumbnails {
  display: flex;
  flex-wrap: wrap;
}

.acf-thumbnail-gallery-left .acf-thumbnail-gallery-thumbnails,
.acf-thumbnail-gallery-right .acf-thumbnail-gallery-thumbnails {
  flex-direction: column;
  flex-wrap: nowrap;
  max-height: 600px;
  overflow-y: auto;
}

.acf-thumbnail-gallery-thumbnails-thumb {
  width: 80px;
  height: 80px;
  padding: 0;
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  opacity: 0.65;
  transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.acf-thumbnail-gallery-thumbnails-thumb:hover,
.acf-thumbnail-gallery-thumbnails-thumb.is-active {
  opacity: 1;
}

.acf-thumbnail-gallery-thumbnails-thumb.is-active {
  transform: scale(0.96);
}

.acf-thumbnail-gallery-thumbnails-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .acf-thumbnail-gallery-left,
  .acf-thumbnail-gallery-right {
    flex-direction: column;
  }

  .acf-thumbnail-gallery-left .acf-thumbnail-gallery-thumbnails,
  .acf-thumbnail-gallery-right .acf-thumbnail-gallery-thumbnails {
    flex-direction: row;
    flex-wrap: wrap;
    max-height: none;
    overflow-y: visible;
  }
}