/*  
.swiper-slide img {
    width: 100%;
    height: 70vh;
    object-fit: contain;     
  }
 
  */
 
/* สำหรับอุปกรณ์มือถือขนาดเล็ก */
@media (max-width: 575.98px) {

    img {
        width: 100%;
        height: 95vh;
        object-fit: contain;
      }
    
      .swiper-container {
        width: 100%;
    
        &.slider {
          width: 100%;
          height: 65vh;
          object-fit: contain;
        }
    
        &.slider-thumbnail img{
            height: 100%;
        }

        &.slider-thumbnail {
          /* height: 50vh; */
    
          .swiper-wrapper {
            .swiper-slide {
              height: 45vh;
              opacity: 0.5;
              overflow: hidden;
              &.swiper-slide-thumb-active {
                opacity: 1;
              }
            }
          }
        }
      }

}

/* สำหรับอุปกรณ์แท็บเล็ตขนาดเล็ก */
@media (min-width: 576px) and (max-width: 767px) {
  img {
    width: 100%;
    height: 95vh;
    object-fit: contain;
  }

  .swiper-container {
    width: 100%;

    &.slider {
      width: 100%;
      height: 65vh;
      object-fit: contain;
    }


    &.slider-thumbnail img{
        height: 100%;
    }
    
    &.slider-thumbnail {
      /* height: 400px; */

      .swiper-wrapper {
        .swiper-slide {
          height: 45vh;
          opacity: 0.5;
          overflow: hidden;
          &.swiper-slide-thumb-active {
            opacity: 1;
          }
        }
      }
    }
  }
}

/* สำหรับแล็ปท็อปและเดสก์ท็อป */
@media (min-width: 768px) and (max-width: 1299px) {
  img {
    width: 100%;
    height: 95vh;
    object-fit: contain;
  }

  .swiper-container {
    width: 100%;

    &.slider {
      width: 100%;
      height: 80vh;
      object-fit: contain;
    }

    &.slider-thumbnail img{
      /* height: 70%; */
      width: 100%; 
      height: 15vh;
      object-fit: fill;
    }

    &.slider-thumbnail {
      /* height: 350px; */

      .swiper-wrapper {
        .swiper-slide {
          height: 350px;
          opacity: 0.5;
          overflow: hidden;
          &.swiper-slide-thumb-active {
            opacity: 1;
          }
        }
      }
    }
  }
}

@media (min-width: 1299px) {
  img {
    width: 100%;
    height: 95vh;
    object-fit: contain; 
  } 
  .swiper-container {
    width: 100%;

    &.slider {
      width: 100%;
      height: 80vh;
      object-fit: contain;
    }

    &.slider-thumbnail img{
      width: 100%;
      height: 15vh;
      object-fit: fill;
    }

    &.slider-thumbnail {
      /* height: 350px; */

      .swiper-wrapper {
        .swiper-slide {
          height: 350px;
          opacity: 0.5;
          overflow: hidden;
          &.swiper-slide-thumb-active {
            opacity: 1;
          }
        }
      }
    }
  }
}