3 Column 4

Breakpoint is limited based on your device or window size.

<div class="blocks-sc-3col-04 wrapper bg-color-ui-01">
  <div class="spacer x-large"></div>
  <div class="grid-container homepage-v2-carousel">
    <div class="grid-x align-center">
      <div class="cell large-10 medium-10 small-12 text-center">
        <h2>The Insites Platform</h2>
        <div class="spacer"></div>
        <p>Kick-start your projects using the core building blocks of Insites. You can then invest more in customising the design to meet your brand, capturing more data for your sales and marketing teams or building custom workflows for an amazing customer experience.</p>
        <div class="spacer xxx-large"></div>
      </div>
      <div class="cell small-12 text-center">
        <!-- desktop carousel -->
        <ins-carousel loop layout="1" per-page="3" bind-to="homepage-carousel" transition="700"
          duration="5000" no-pagination="true" no-carousel-button="false" data-test="" 
          class="homepage-carousel">
          <div id="homepage-carousel">
            <!-- item -->
            <div class="slide-container" data-test="">
              <a>
                <div class="img-wrap">
                  <img src="https://insites.imgix.net/Dark.png" alt="" />
                </div>
                <div class="spacer"></div>
                <div>
                  <p class="heading-3">Content Management System (CMS)</p>
                </div>
              </a>
            </div>
            <!-- /item -->
            <!-- item -->
            <div class="slide-container" data-test="">
              <a>
                <div class="img-wrap">
                  <img src="https://insites.imgix.net/Dark.png" alt="" />
                </div>
                <div class="spacer"></div>
                <div>
                  <p class="heading-3">Customer Relationship Management (CRM)</p>
                </div>
              </a>
            </div>
            <!-- /item -->
            <!-- item -->
            <div class="slide-container" data-test="">
              <a>
                <div class="img-wrap">
                  <img src="https://insites.imgix.net/Dark.png" alt="" />
                </div>
                <div class="spacer"></div>
                <div>
                  <p class="heading-3">Database Builder</p>
                </div>
              </a>
            </div>
            <!-- /item -->
            <!-- item -->
            <div class="slide-container" data-test="">
              <a>
                <div class="img-wrap">
                  <img src="https://insites.imgix.net/Dark.png" alt="" />
                </div>
                <div class="spacer"></div>
                <div>
                  <p class="heading-3">Secure Zones</p>
                </div>
              </a>
            </div>
            <!-- /item -->
          </div>
        </ins-carousel>
        <!-- /desktop carousel -->

        <!-- tablet carousel -->
        <ins-carousel loop layout="1" per-page="2" bind-to="tablet-carousel" transition="700"
          duration="5000" no-pagination="false" no-carousel-button="true" data-test="" 
          class="tablet-carousel show-for-medium-only">
          <div id="tablet-carousel" class="show-for-medium-only">
            <!-- item -->
            <div class="slide-container" data-test="">
              <a>
                <div class="img-wrap">
                  <img src="https://insites.imgix.net/Dark.png" alt="" />
                </div>
                <div class="spacer"></div>
                <div>
                  <p class="heading-3">Content Management System (CMS)</p>
                </div>
              </a>
            </div>
            <!-- /item -->
            <!-- item -->
            <div class="slide-container" data-test="">
              <a>
                <div class="img-wrap">
                  <img src="https://insites.imgix.net/Dark.png" alt="" />
                </div>
                <div class="spacer"></div>
                <div>
                  <p class="heading-3">Customer Relationship Management (CRM)</p>
                </div>
              </a>
            </div>
            <!-- /item -->
            <!-- item -->
            <div class="slide-container" data-test="">
              <a>
                <div class="img-wrap">
                  <img src="https://insites.imgix.net/Dark.png" alt="" />
                </div>
                <div class="spacer"></div>
                <div>
                  <p class="heading-3">Database Builder</p>
                </div>
              </a>
            </div>
            <!-- /item -->
            <!-- item -->
            <div class="slide-container" data-test="">
              <a>
                <div class="img-wrap">
                  <img src="https://insites.imgix.net/Dark.png" alt="" />
                </div>
                <div class="spacer"></div>
                <div>
                  <p class="heading-3">Secure Zones</p>
                </div>
              </a>
            </div>
            <!-- /item -->
          </div>
        </ins-carousel>
        <!-- /tablet carousel -->

        <!-- mobile carousel -->
        <ins-carousel loop layout="1" per-page="1" bind-to="mobile-carousel" transition="700"
          duration="5000" no-pagination="false" no-carousel-button="true" data-test="" 
          class="mobile-carousel show-for-small-only">
          <div id="mobile-carousel" class="show-for-small-only">
            <!-- item -->
            <div class="slide-container" data-test="">
              <a>
                <div class="img-wrap">
                  <img src="https://insites.imgix.net/Dark.png" alt="" />
                </div>
                <div class="spacer"></div>
                <div>
                  <p class="heading-3">Content Management System (CMS)</p>
                </div>
              </a>
            </div>
            <!-- /item -->
            <!-- item -->
            <div class="slide-container" data-test="">
              <a>
                <div class="img-wrap">
                  <img src="https://insites.imgix.net/Dark.png" alt="" />
                </div>
                <div class="spacer"></div>
                <div>
                  <p class="heading-3">Customer Relationship Management (CRM)</p>
                </div>
              </a>
            </div>
            <!-- /item -->
            <!-- item -->
            <div class="slide-container" data-test="">
              <a>
                <div class="img-wrap">
                  <img src="https://insites.imgix.net/Dark.png" alt="" />
                </div>
                <div class="spacer"></div>
                <div>
                  <p class="heading-3">Database Builder</p>
                </div>
              </a>
            </div>
            <!-- /item -->
            <!-- item -->
            <div class="slide-container" data-test="">
              <a>
                <div class="img-wrap">
                  <img src="https://insites.imgix.net/Dark.png" alt="" />
                </div>
                <div class="spacer"></div>
                <div>
                  <p class="heading-3">Secure Zones</p>
                </div>
              </a>
            </div>
            <!-- /item -->
          </div>
        </ins-carousel>
        <!-- /mobile carousel -->
      </div>
    </div>
  </div>
  <div class="spacer x-large"></div>
</div>
.blocks-sc-3col-04 .homepage-carousel {
  display: none; 
}

@media screen and (min-width: 1023px) {
.blocks-sc-3col-04 .homepage-carousel {
    display: block; 
  } 
}