Hero 5

<div class="blocks-hero-05 bg-color-ui-01">
    <div class="spacer section"></div>
    <div class="wrapper">
        <div class="grid-container">
            <div class="grid-x">
                <div class="large-7 medium-12 small-12 cell">
                    <h1>Welcome to <br>Insites Blocks</h1>
                    <div class="spacer large"></div>
                    <p class="sub-heading">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>
            </div>

        </div>
    </div>
    <div class="spacer section"></div>
    <div class="grid-container">
        <div class="grid-x">
            <div class="large-3 medium-12 small-12 cell">
                <div class="wrapper link-container">
                    <a>
                        <ins-button type="button" label="button" size="normal" icon="icon-play-circle-fill" ></ins-button>
                    </a>
                    <div class="spacer large"></div>
                    <a >
                        <i class="btn__icon icon-chevrons-down icon-body"></i>
                    </a>
                </div>
            </div>
            <div class="spacer xxx-large hide-for-large cell"></div>
            <div class="large-9 medium-12 small-12 cell text-center">
                <div class="img-container">
                    <img src="https://insites.imgix.net/Dark.png?fit=crop&w=844&h=509&crop=entropy" alt="Insites Hero Image">
                </div>
            </div>
        </div>
    </div>
    <div class="spacer xxxx-large"></div>
</div>

/* Start: Overwrite - Foundation Grid Container*/
.blocks-hero-05 .grid-container{
  padding-left: 0px;
  padding-right: 0px;
  max-width: var(--container-max-width, 1232px);
  position: relative;
}
/* End: Overwrite - Foundation Grid Container*/

.blocks-hero-05 h1{
  font-size: 80px;
  line-height: 96px;
}

.blocks-hero-05 .img-container img{
  width:100%;
}

.blocks-hero-05 a i{
  color: var(--color-main, #116EC3);
}

.blocks-hero-05 .sub-heading{
  font-size: var(--typography-medium, 1rem);
}

.blocks-hero-05 .icon-body{
  font-size: var(--typography-x-large, 1.5rem);
}

@media screen and (min-width: 1024px){
  .blocks-hero-05 .link-container{
    padding-left:0px;
    padding-right:0px;
  }
}

@media screen and (max-width: 639px) {
  .blocks-hero-05 h1{
    font-size: var(--typography-xxx-large, 2.5rem);
    line-height: 48px;
  }
}