/* Styles for sections/home-image-banner.liquid. Moved out of the {% stylesheet %} block
   in Phase 3 so the rules load only on pages that render the section. */

.cf-jc-product-img-main {

  .product-img {
    box-shadow: 0 0 0 1px #0000000f,0 1px 1px -.5px #0000000f,0 3px 3px -1.5px #0000000f,0 6px 6px -3px #0000000f,0 12px 12px -6px #0000000f,0 24px 24px -12px #0000000f;
    border-radius: 30px;
    overflow: hidden;
    display: flex;
    /* height: 686px;
    @media (max-width: 767px){
      height: 441px;
    } */
    .product-desktop{
      position: relative;
      height: 100%;
      width: 100%;
      display: inline-flex;
      @media (max-width: 767px){
        display: none;
      }
    }
    .product-mobile{
      display: none;
      position: relative;
      height: 100%;
      width: 100%;
      @media (max-width: 767px){
        display: inline-flex;
      }
    }
    .banner-product-group{
      display: inline-flex;
      width: 100%;
      justify-content: center;
      position: absolute;
      top: auto;
      z-index: 1;
      gap: 50px;
      bottom: 60px;
      padding: 0 50px;
      @media (max-width: 1023px){
        bottom: 20px;
      }
      @media (max-width: 767px){
        /* padding: 0 0; */
        flex-wrap: wrap;
        bottom: 30px;
        gap: 30px;
        padding: 0 30px;
      }
      .banner-product-item{
        max-width: 25%;
        width: 220px;
        display: inline-flex;
        @media (max-width: 1023px){
          width: 170px;
        }
        @media (max-width: 767px){
          max-width: 40%;
          width: 90%;
        }
        &:nth-child(2),
        &:nth-child(4){
          margin-top: 130px;
          @media (max-width: 767px){
            margin-top: 0;
          }
        }
        img{
          width: 100%;
          object-fit: contain;
        }
      }
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}