Hero 1

Breakpoint is limited based on your device or window size.

<div class="blocks-hero-01 homepage-banner-wrap">
  <ins-carousel no-carousel-button loop layout="1" bind-to="homepage-banner" transition="700" duration="5000"
    data-test="homepage-slider" height="460px">
    <div id="homepage-banner">
      <!-- item -->
      <div class="slide-container" style="background-color: #000;">
        <div class="img-wrap">
          <!-- desktop image -->
          <img
            src="https://insites.imgix.net/bg-dark.jpg"
            alt="" class="hide-for-small-only" />
          <!-- mobile image -->
          <img src="https://insites.imgix.net/bg-dark.jpg" alt=""
            class="show-for-small-only" />
        </div>         
        <div class="slide-content wrapper vertical-align-middle">
          <div class="grid-x">
            <div class="large-6 large-offset-1 medium-12 small-12 cell">
              <h1 class="heading heading-1">Welcome to Insites Blocks</h1>
              <div class="spacer"></div>
              <p>Simple, clean, customisable AND easy to use? Yeah, we're as stoked as you as well! This is website template is for you to make your own. Tweak it or break it, it's totally up to you.</p>
              <div class="spacer x-large"></div>
              <a>
                <ins-button solid label="Learn More">
                </ins-button>
              </a>
            </div>
          </div>
        </div>
      </div>
      <!-- /item -->

      <!-- item -->
      <div class="slide-container" style="background-color: #000;">
        <div class="img-wrap">
          <!-- desktop image -->
          <img
            src="https://insites.imgix.net/bg-dark2.jpg"
            alt="" class="hide-for-small-only" />
          <!-- mobile image -->
          <img src="https://insites.imgix.net/bg-dark2.jpg" alt=""
            class="show-for-small-only" />
        </div>         
        <div class="slide-content wrapper vertical-align-middle">
          <div class="grid-x">
            <div class="large-6 large-offset-1 medium-12 small-12 cell">
              <h1 class="heading heading-1">Welcome to Insites Blocks</h1>
              <div class="spacer"></div>
              <p>Simple, clean, customisable AND easy to use? Yeah, we're as stoked as you as well! This is website template is for you to make your own. Tweak it or break it, it's totally up to you.</p>
              <div class="spacer x-large"></div>
              <a>
                <ins-button solid label="Learn More">
                </ins-button>
              </a>
            </div>
          </div>
        </div>
      </div>
      <!-- /item -->

      <!-- item -->
      <div class="slide-container" style="background-color: #000;">
        <div class="img-wrap">
          <!-- desktop image -->
          <img
            src="https://insites.imgix.net/bg-dark.jpg"
            alt="" class="hide-for-small-only" />
          <!-- mobile image -->
          <img src="https://insites.imgix.net/bg-dark.jpg" alt=""
            class="show-for-small-only" />
        </div>         
        <div class="slide-content wrapper vertical-align-middle">
          <div class="grid-x">
            <div class="large-6 large-offset-1 medium-12 small-12 cell">
              <h1 class="heading heading-1">Welcome to Insites Blocks</h1>
              <div class="spacer"></div>
              <p>Simple, clean, customisable AND easy to use? Yeah, we're as stoked as you as well! This is website template is for you to make your own. Tweak it or break it, it's totally up to you.</p>
              <div class="spacer x-large"></div>
              <a>
                <ins-button solid label="Learn More">
                </ins-button>
              </a>
            </div>
          </div>
        </div>
      </div>
      <!-- /item -->
    </div>
  </ins-carousel>
</div>
.blocks-hero-01 #homepage-banner .img-wrap img.show-for-small-only {
  min-height: unset;
  /* height: 460px; */
}

.blocks-hero-01 #homepage-banner .slide-container {
  min-height: auto;
}

.blocks-hero-01 #homepage-banner .img-wrap img {
  min-height: 100%;
  height: 100%;
}

.blocks-hero-01 #homepage-banner .slide-container .wrapper .grid-x {
  max-width: var(--container-max-width, 1232px);
}