4 Column 1

<div class="blocks-sc-4col-01 wrapper">
  <div class="grid-container">
    <div class="spacer x-large"></div>
    <div class="small-12 cell text-center">      
      <h2>Products</h2>
      <div class="spacer xxx-large"></div>
    </div>

    <div id="product-grid" class="products-grid grid-x grid-margin-x grid-margin-y large-up-4 medium-up-3 small-up-1">
      <!-- updated product -->
      <div class="cell">
        <ins-card steady no-padding>
          <div class="product-info flex-container">
            <div class="img-cont">

              <!-- if out of stock -->
              <!-- <div class="out-of-stock"></div> -->


              <!-- if sale -->
              <!-- <div class="on-sale-tag">ON SALE</div> -->

              <img
                src="https://insites.imgix.net/Light.png"
                alt="" />

            </div>
            <div class="spacer small"></div>
            <div class="info">
              <div class="name">
                <p class="heading-6">Product Name
                <p>
              </div>
              <div class="spacer xx-small"></div>
              <div class="description">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non at, iusto a fugiat et recusandae
                  minima...</p>
              </div>
            </div>
            <div class="spacer list__spacer"></div>
            <div class="price-button-holder">
              <div class="price">
                <div class="current">120</div>
                <!-- if sale  -->
                <!-- <div class="spacer x-small"></div>
                <div class="old">150</div>      -->
              </div>
              <div class="price-button">
                <ins-button label="BUTTON" solid color="blue" size="small">
                </ins-button>
              </div>
            </div>
          </div>
          <div class="spacer x-large show-for-small-only"></div>
        </ins-card>
      </div>
      <!-- /updated product -->

      <!-- updated product -->
      <div class="cell">
        <ins-card steady no-padding>
          <div class="product-info flex-container">
            <div class="img-cont">

              <!-- if out of stock -->
              <!-- <div class="out-of-stock"></div> -->


              <!-- if sale -->
              <div class="on-sale-tag">ON SALE</div>

              <img
                src="https://insites.imgix.net/Light.png"
                alt="preview image" />

            </div>
            <div class="spacer small"></div>
            <div class="info">
              <div class="name">
                <p class="heading-6">Product Name
                <p>
              </div>
              <div class="spacer xx-small"></div>
              <div class="description">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non at, iusto a fugiat et recusandae
                  minima...</p>
              </div>
            </div>
            <div class="spacer list__spacer"></div>
            <div class="price-button-holder">
              <div class="price">
                <div class="current">120</div>
                <div class="spacer x-small"></div>
                <div class="old">150</div>              
              </div>
              <div class="price-button">
                <ins-button label="BUTTON" solid color="blue" size="small">
                </ins-button>
              </div>
            </div>
          </div>
          <div class="spacer x-large show-for-small-only"></div>
        </ins-card>
      </div>
      <!-- /updated product -->

      <!-- updated product -->
      <div class="cell">
        <ins-card steady no-padding>
          <div class="product-info flex-container">
            <div class="img-cont">

              <!-- if out of stock -->
              <!-- <div class="out-of-stock"></div> -->


              <!-- if sale -->
              <!-- <div class="on-sale-tag">ON SALE</div> -->

              <img
                src="https://insites.imgix.net/Light.png"
                alt="" />

            </div>
            <div class="spacer small"></div>
            <div class="info">
              <div class="name">
                <p class="heading-6">Product Name
                <p>
              </div>
              <div class="spacer xx-small"></div>
              <div class="description">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non at, iusto a fugiat et recusandae
                  minima...</p>
              </div>
            </div>
            <div class="spacer list__spacer"></div>
            <div class="price-button-holder">
              <div class="price">
                <div class="current">120</div>
                <!-- if sale  -->
                <!-- <div class="spacer x-small"></div>
                <div class="old">150</div>      -->
              </div>
              <div class="price-button">
                <ins-button label="BUTTON" solid color="blue" size="small">
                </ins-button>
              </div>
            </div>
          </div>
          <div class="spacer x-large show-for-small-only"></div>
        </ins-card>
      </div>
      <!-- /updated product -->
      <!-- updated product -->
      <div class="cell">
        <ins-card steady no-padding>
          <div class="product-info flex-container">
            <div class="img-cont">

              <!-- if out of stock -->
              <div class="out-of-stock"></div>


              <!-- if sale -->
              <!-- <div class="on-sale-tag">ON SALE</div> -->

              <img
                src="https://insites.imgix.net/Light.png"
                alt="" />

            </div>
            <div class="spacer small"></div>
            <div class="info">
              <div class="name">
                <p class="heading-6">Product Name
                <p>
              </div>
              <div class="spacer xx-small"></div>
              <div class="description">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non at, iusto a fugiat et recusandae
                  minima...</p>
              </div>
            </div>
            <div class="spacer list__spacer"></div>
            <div class="price-button-holder">
              <div class="price">
                <div class="current">120</div>
                <!-- if sale  -->
                <!-- <div class="spacer x-small"></div>
                <div class="old">150</div>      -->
              </div>
              <div class="price-button">
                <ins-button label="BUTTON" solid color="blue" size="small">
                </ins-button>
              </div>
            </div>
          </div>
          <div class="spacer x-large show-for-small-only"></div>
        </ins-card>
      </div>
      <!-- /updated product -->

      
    </div>
    <div class="spacer x-large"></div>
  </div>
</div>

.blocks-sc-4col-01 {
  background-color: var(--color-ui-01, #FFFFFF);
}

.blocks-sc-4col-01 .price .old {
  display: inline-block;
}

.blocks-sc-4col-01 ins-button {
  float: right;
}

.blocks-sc-4col-01 .img-cont {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden
}

.blocks-sc-4col-01 .img-cont img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%
}

#product-grid .product-info .img-cont .on-sale-tag {
  left: 0;
}

.blocks-sc-4col-01 .img-cont.first-box {
  display: block;
}

.blocks-sc-4col-01 .img-cont.first-box img {
  object-fit: cover;
  height: 100%;
}

.blocks-sc-4col-01 ins-card,
.blocks-sc-4col-01 .ins-card-wrap,
.blocks-sc-4col-01 .ins-card-wrap > .product-info {
  height: auto!important;
}

.blocks-sc-4col-01 #product-grid .price .current,
.blocks-sc-4col-01 #product-grid .price .old {
  font-family: var(--font-family-03, sans-serif);
}

.blocks-sc-4col-01 #product-grid .product-info .img-cont img{
  width: 100%;
  height: auto;
}