#mySwiper2{
  display: block;
}

#mySwiper1{
  display: block;
  height:105%;
}

.h-fit{
  height: fit-content;
} 

.w-144 {
  width: 220px ;
  height: 154px;
}

.thumbnail-frame {
  margin-right: 10px;
}

.thumbnail-list {
  display: flex; /* just in case it's not already set */
  }

.img-frame{
  position: relative;
  width: 144px;
  height: 144px !important;
  border-radius: 12px;
  /* background-size: cover; */
  background-position: 50% 50%;
  border: 1px solid;
  border-color: var(--materialcolororange-100);
  cursor: pointer;
} 

@media screen  and (max-width:1200px) {
    .product-info {
      height: 600px !important;
    }

    .product-info .fixed-aspect-ratio {
      flex: auto !important;
    }

    .product-info .metadata { 
      /* flex: auto !important; */
      overflow-y: auto;
    }

    #mySwiper2{
      display: block;
    }
    
    #mySwiper1{
      display: block;
    }

    .mySwiper1 .swiper-wrapper{
      margin-bottom: 30px !important;
    }
}


@media(max-width:767px){
    .mySwiper2 .swiper-slide{
      height: 350px;
    }

    .mySwiper1 .swiper-slide {
      width: 150px;
      height: 90px;
      flex-shrink: 0;
    }

    .mySwiper1 .swiper-slide .img-frame {
      width: 90% !important;
      height: 100% !important; 
      object-fit: cover;
    }
}