.product-info {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 8px;
    position: relative;
    height: 800px;
    overflow: hidden;
  }

  .product_slide_images {
    background-position: top;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .blog_article_side_image {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
  }

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

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

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


  @media screen and (max-width:767px) {

    .product-info {
      flex-wrap: wrap;
      height: 400px;
    }

    .metadata { 
      max-width: unset !important;
    }

  }
  
  .product-info .thumbnail-window {
    position: relative;
    align-self: stretch;
    width: 160px;
    margin: 10px 0px 0px 0px;
    overflow: hidden;
  }
  
  .product-info .thumbnail-list {
    display: flex;
    flex-direction: column;
    width: 160px;
    margin-left: 10px;
    align-items: center;
    /* row-gap: 16px; */
    /* gap: 16px; */
    /* padding: 8px; */
    position: relative;
  }

  .swiper-container-free-mode>.swiper-wrapper {
      transition-timing-function: ease-out;
      margin:5px 0px 0px 5px;
  }

  .product-info .thumbnail-frame {
    position: relative;
    width: 144px;
    height: 144px !important;
    border-radius: 12px;
    background-size: cover;
    background-position: 50% 50%;
  }
  
  .product-info .background-state {
    height: 144px;
    border-radius: 12px;
    cursor: pointer;
  }
  .product-info .background-state:hover ,
  .product-info .background-state:active  { 
    border: 1px solid;
    border-color: var(--materialcolororange-300);
    box-shadow: var(--shadow-orange-lg-orange);
  }
  
  
.tablet-view-swiper.swiper-slide-thumb-active .img-frame {
  border: 3px solid rgba(255, 153, 51, 1);
  box-shadow: var(--shadow-orange-lg-orange);
  transition: all 0.3s ease-in-out;
  transform: scale(1.06);
}

.desktop-view-swiper.swiper-slide-thumb-active .img-frame {
  border: 3px solid rgba(255, 153, 51, 1);
  box-shadow: var(--shadow-orange-lg-orange);
  transition: all 0.3s ease-in-out;
  transform: scale(1.07);
}

.mobile-view-swiper.swiper-slide-thumb-active .img-frame {
  border: 3px solid rgba(255, 153, 51, 1);
  box-shadow: var(--shadow-orange-lg-orange);
  transition: all 0.3s ease-in-out;
  transform: scale(1.07);
}

  .product-info .fixed-aspect-ratio {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    flex: 1;
    flex-grow: 1;
    /* height: 550px; */
    background-size: cover;
    background-position: 50% 50%;
  }

  .showroom-background-img {
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    /* aspect-ratio: ; */
    image-orientation: from-image;
    padding-top: 80.64%;

    /* background-position: center; */
  }
  
  .product-info .element-fixed-aspect {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    overflow: hidden;
  }
  
  .product-info .aspect-ratio-lock {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 1px;
    transform: rotate(-30deg);
  }
  
  .product-info .metadata , .metadata{
    display: flex;
    flex-direction: column;
    min-width: 320px;
    max-width: 460px;
    align-items: flex-start;
    gap: 22px;
    position: relative;
    flex: 1;
    align-self: stretch;
    flex-grow: 1;
  }
  
  .metadata .product-title {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 22px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    justify-content: space-between;
  }
  
  .metadata .title {
    position: relative;
    flex: 1;
    margin-top: -1px;
    font-family: var(--display-sm-normal-font-family);
    font-weight: var(--display-sm-normal-font-weight);
    color: var(--black);
    font-size: var(--display-sm-normal-font-size);
    letter-spacing: var(--display-sm-normal-letter-spacing);
    line-height: var(--display-sm-normal-line-height);
    font-style: var(--display-sm-normal-font-style);
  }
  
  .metadata .icon-button {
    display: flex;
    flex-direction: column;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px;
    position: relative;
  }
  
  .product-info .container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    flex: 0 0 auto;
    margin-top: -4px;
    margin-bottom: -4px;
    margin-left: -4px;
    margin-right: -4px;
    border-radius: 100px;
    overflow: hidden;
    border: 1px solid;
    border-color: var(--x01-primary500);
  }
  
  .product-info .state-layer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .product-info .icons-share {
    position: relative;
    width: 24px;
    height: 24px;
  }
  
  .product-info .icon {
    position: absolute;
    width: 18px;
    height: 20px;
    top: 2px;
    left: 3px;
  }
  
  .metadata .description {
    position: relative;
    align-self: stretch;
    font-family: var(--text-md-normal-font-family);
    font-weight: var(--text-md-normal-font-weight);
    color: var(--black);
    font-size: var(--text-md-normal-font-size);
    letter-spacing: var(--text-md-normal-letter-spacing);
    line-height: var(--text-md-normal-line-height);
    font-style: var(--text-md-normal-font-style);
  }
  
  .metadata .data-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    align-self: stretch;
    width: 100%;
    align-items: flex-start;
    position: relative;
    flex: 0 0 auto;
  }
  
  .metadata .data-item {
    display: inline-flex;
    gap: 16px;
    align-items: flex-start;
    position: relative;
    flex: 0 0 auto;
  }
  
  .metadata .label {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: var(--text-lg-bold-font-family);
    font-weight: var(--text-lg-bold-font-weight);
    color: var(--black);
    font-size: var(--text-lg-bold-font-size);
    letter-spacing: var(--text-lg-bold-letter-spacing);
    line-height: var(--text-lg-bold-line-height);
    white-space: nowrap;
    font-style: var(--text-lg-bold-font-style);
  }
  
  .metadata .date {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: var(--text-lg-normal-font-family);
    font-weight: var(--text-lg-normal-font-weight);
    color: var(--black);
    font-size: var(--text-lg-normal-font-size);
    letter-spacing: var(--text-lg-normal-letter-spacing);
    line-height: var(--text-lg-normal-line-height);
    /* white-space: nowrap; */
    font-style: var(--text-lg-normal-font-style);
  }
  
  .product-info .text-wrapper {
    font-weight: var(--text-lg-bold-font-weight);
    font-family: var(--text-lg-bold-font-family);
    font-style: var(--text-lg-bold-font-style);
    letter-spacing: var(--text-lg-bold-letter-spacing);
    line-height: var(--text-lg-bold-line-height);
    font-size: var(--text-lg-bold-font-size);
  }
  
  .metadata {
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }