Hero 2

Breakpoint is limited based on your device or window size.

<div class="blocks-hero-02">
    <div class="grid-container full">
        <div class="grid-x">
            <div class="large-6 medium-12 small-12 cell bg-color-main">
                <div class="grid-x wrapper align-middle text-grid">
                    <div class="large-6 medium-12 small-12 cell ">
                        <div class="spacer xxxx-large"></div>
                        <div class="main-text">
                            <h1>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 type="button" label="LEARN MORE" solid color="white" size="normal"></ins-button>
                            </a>
                        </div>
                        <div class="spacer xxxx-large"></div>
                    </div>
                    <div class="large-2 medium-12 small-12 cell show-for-large">
                         
                    </div>
                </div>
            </div>
            <div class="large-6 medium-12 small-12 cell show-for-large">
                <div class="main-image">    
                    <img src="https://insites.imgix.net/Dark.png?fit=crop&w=720&crop=entropy" alt="Hero 02" />
                </div>
            </div>
        </div>
    </div>
</div>
.blocks-hero-02 .text-grid{
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  height:100%;
}

.blocks-hero-02 .main-image{
  height:100%;
}

.blocks-hero-02 .main-image img{
  width:100%;
  height: 100%;
  object-fit: cover;
}


@media screen and (max-width: 1024px) {
  .blocks-hero-02 .text-grid{
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  
}