.carouselContainer {
  width: 100%;
  max-width: 1366px;
  padding: 0 0.75rem 0 0.75rem;
  display: flex;
  gap: 10px;
  box-sizing: border-box;
  aspect-ratio: 16/6;
  @media screen and (max-width: 1024px) {
    aspect-ratio: 16/7;
  }
  @media screen and (max-width: 768px) {
    padding: 0;
  }
}

.mainSlider {
  flex: 3.28;
  height: 100%;
  border-radius: 10px;

  img {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
}

.thumbSlider {
  flex: 0.72;
  overflow-y: auto;
  height: 100%;
  scroll-behavior: smooth;
  @media screen and (max-width: 767px) {
    display: none;
  }
  :global(.swiper) {
    height: 100%;
    // max-height: 100%;
  }

  :global(.swiper-wrapper) {
    height: auto;
    display: flex;
    flex-direction: column;
  }

  :global(.swiper-slide) {
    height: 100% !important;
    width: 100% !important;
    margin-bottom: 8px;
  }
  &::-webkit-scrollbar {
    width: 7px;
  }

  &::-webkit-scrollbar-track {
    background: #e5e7eb;
  }

  &::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
  }
  .thumbWrapper {
    position: relative;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 10px;
      cursor: pointer;
    }

    .progressBarImg {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 5px;
      width: 100%;
      background: rgba(57, 47, 47, 0.5);
      animation: progress 3s linear;
      height: 100%;
      border-radius: 10px;
    }

    .progressBar {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 5px;
      width: 100%;
      background: rgba(207, 12, 12, 0.5);
      animation: progress 3s linear infinite;
      border-end-end-radius: 10px;
      border-end-start-radius: 10px;
    }
  }
}

@keyframes progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
