.elementor-widget-the7-woocommerce-product-images-list {
  overflow: hidden;
  & .dt-product-gallery {
    --scrollbar-thumb-color: rgba(0, 0, 0, 0.4);
    --scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.6);
    scrollbar-color: var(--scrollbar-thumb-color) transparent;
    overflow-x: var(--overflow-x, hidden);
    overflow-y: hidden;
  }
  .the7-scrollbar:hover {
    scrollbar-color: var(--scrollbar-thumb-hover-color) transparent;
  }
  .the7-scrollbar::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  .the7-scrollbar::-webkit-scrollbar-thumb {
    // border: solid 3px rgba(0, 0, 0, 0.4);
    border-radius: 7px;
    background: var(--scrollbar-thumb-color);
  }
  .the7-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover-color);
  }
  & .product-list-wrap {
    grid-auto-flow: var(--grid-auto-flow, unset);
    grid-auto-columns: var(--grid-auto-columns);
    grid-template-columns: var(
      --grid-template-columns,
      repeat(var(--grid-columns), 1fr)
    );
    align-items: center;
  }
  & .the7-image-wrapper {
    display: flex;
    transition: all 0.3s;
    & img {
      transition: all 0.3s;
    }
  }
  & .post-thumbnail-rollover:before,
  & .post-thumbnail-rollover:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: 1;
    border-radius: inherit;
  }
  & .post-thumbnail-rollover:after,
  & .the7-image-wrapper:hover .post-thumbnail-rollover:before {
    opacity: 0;
  }

  & .post-thumbnail-rollover:before,
  & .the7-image-wrapper:hover .post-thumbnail-rollover:after {
    opacity: 1;
  }
  & .gallery-video-wrap {
    aspect-ratio: var(--aspect-ratio);
    position: relative;
    width: 100%;
  }
  & video,
  & iframe {
    position: var(--position, static);
    top: 0;
    left: 0;
    width: var(--img-width, inherit);
    height: var(--height, auto);
    max-width: var(--max-width, 100%);
    max-height: var(--max-height);
    object-fit: var(--object-fit, cover);
    aspect-ratio: var(--aspect-ratio, auto);

    border-radius: inherit;
    transition: 0.3s ease;
  }
  & video,
  & iframe {
    .elementor-widget:not(.video-autoplay-yes)& {
      opacity: 0;
    }
  }
  & .playing-video video,
  & .playing-video iframe {
    .elementor-widget:not(.video-autoplay-yes)& {
      opacity: 1;
    }
  }
  & iframe {
    max-height: 100%;
    background-color: #000000;
    aspect-ratio: var(--aspect-ratio, 16/9);
  }
  & .the7-video-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: var(--object-fit, contain);
    background-repeat: no-repeat;
    background-position: 50%;
    cursor: pointer;
    border-radius: inherit;
    transition: 0.3s ease;
  }
  & .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 30px;
    min-height: 30px;
    z-index: 2;
    transition: all 0.3s;
    cursor: pointer;
  }
  & .play-icon i {
    transition: color 0.3s;
  }
  & .play-icon svg {
    transition: fill 0.3s, color 0.3s;
  }
}
