Shopify Hero Banner Section Using Down theme 2022

{% schema %}
  {
    "name": "Hero Banner 1",
    "class": "hero-section",
    "settings": [],
    "presets": [
      {
        "name": "Hero Banner 1"
      }
    ]
  }
{% endschema %}

<style type="text/css">
	.hero-section .overflow-hidden {
	    overflow: hidden!important;
	}
	.hero-section .hm-widget-banner .row--banners {
	    display: flex;
	    flex-wrap: wrap;
	}
	.hero-section .hm-widget-banner .featured-banner {
	    position: relative;
	}
	.hero-section .featured-banner {
	    position: relative;
	    overflow: hidden;
	}
	.hero-section .fade-in.lazyloaded {
	    opacity: 1;
	    transform: scale(1);
	}
	.hero-section .featured-banner img {
	    display: block;
	    width: 100%;
	    max-width: 100%;
	    transition: all .5s ease-in-out;
        height: auto;
	}
	.hero-section .fade-in {
	    transform: scale(1.1);
	    opacity: 0;
	    transition: transform .8s cubic-bezier(.215,.61,.355,1),opacity .8s cubic-bezier(.215,.61,.355,1);
	    transition-delay: .5s;
	}
	.hero-section .position-absolute {
	    position: absolute!important;
	}
	.hero-section .hm-widget-banner .banner-wrapper-infor {
	    width: 100%;
	    display: flex;
	}
	.hero-section .hm-widget-banner .title-banner {
	    font-size: 36px;
	    margin-bottom: 5px;
	    margin-top: 0;
	    text-transform: uppercase;
	    color: #ffffff;
	}
	.hero-section .hm-button {
	    font-size: 12px;
	    text-transform: uppercase;
	    letter-spacing: 3px;
	    border: 2px solid white;
	    padding: 12px 30px;
	    color: #fff;
	    text-decoration: none;
	    display: inline-block!important;
	}
	.hero-section .hm-button:hover{
		background-color: #ffffff;
		color: #000;
	}
	.hero-section .hm-widget-banner .col-banner {
	    max-width: 50%;
	    flex: 0 0 50%;
	}
	.hero-section .hm-widget-banner .col-banner .banner-wrapper-infor {
	    padding: 0 15px;
	    justify-content: center;
	    text-align: center;
	}
	.hero-section .hm-widget-banner .col-banner .banner-wrapper-infor.position-absolute {
	    top: 50%;
	    transform: translateY(-50%);
	}
    @media (max-width: 1199px){
      .hero-section .hm-widget-banner .title-banner {
	    font-size: 34px;
      }
    }
    @media (max-width: 991px){
      .hero-section .hm-widget-banner .title-banner {
	    font-size: 32px;
      }
    }
	@media (max-width: 767px){
		.hero-section .hm-widget-banner .col-banner {
		    max-width: 100%;
		    flex: 0 0 100%;
		}
        .hero-section .hm-widget-banner .title-banner {
    	    font-size: 30px;
        }
	}
    @media (max-width: 575px){
        .hero-section .hm-widget-banner .title-banner {
    	    font-size: 28px;
        }
    }
</style>
<section class="hm-widget-banner">
	<div class="container-full">
		<div class="hero-section__inner">
			<div class="hero-section__content">
				<div class="row--banners">
                  {% for block in section.blocks %}
                    {% case block.type %}
                      {% when 'box' %}
                      {% if block.settings.box_img != blank %}
                      <div class="col-banner">
                          <div class="featured-banner">
                              <div class="hm-image">
                                  <a href="{{ block.settings.btn_link }}">
                                      <img class="img-fluid noscript" src="{{ block.settings.box_img | image_url: width: 2048 }}" width="960" height="730" alt=""/>
                                  </a>
                              </div>
                              {% if block.settings.box_img != blank %}
                              <div class="banner-wrapper-infor position-absolute">
                                  <div class="info">
                                      <div class="content">
                                          <h3 class="title-banner">{{ block.settings.title }}</h3>
                                          {% if block.settings.btn != blank %}
                                          <a class="hm-button" href="{{ block.settings.btn_link }}"><span>{{ block.settings.btn }}</span></a>
                                          {% endif %}
                                      </div>
                                  </div>
                              </div>
                              {% endif %}
                          </div>
                      </div>
                      {% endif %}
                  	{% endcase %}
                  {% endfor %}
				</div>
			</div>
		</div>
	</div>
</section>
{% schema %}
  {
    "name": "Hero Banner 1",
    "class": "hero-section",
    "settings": [],
    "max_blocks": 4,
    "blocks": [
       {
         "name": "Hero Box",
         "type": "box",
         "settings": [
           {
              "type": "image_picker",
              "id": "box_img",
              "label": "Column Image"
           },
           {
              "type": "text",
              "id": "title",
              "default": "New Arrivals",
              "label": "Title"
           },
           {
              "type": "text",
              "id": "btn",
              "default": "Button Text",
              "label": "Shop Now"
           },
           {
              "type": "url",
              "id": "btn_link",
              "label": "Button URL"
           }
         ]
       }
    ],
    "presets": [
      {
        "name": "Hero Banner 1"
      }
    ]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}