Untitled

<div class="banner-{{section.id}} banner-wrapper banner">
  <div class="banner-wrapper-overlay"></div>
    <div class="banner-row content-2">
     
        {% if section.settings.banner_image != blank %}
        <div class="banner-imgs">
            <img src="{{section.settings.banner_image | img_url: 'master'}}" />
        </div>
        {% endif %}
        <div class="banner-contss">
            <div class="banner-sub">
                <h4> {{ section.settings.subtitle_2 }}</h4>
                <h2> {{ section.settings.title_2 }}</h2>
            </div>
            <div class="description">
            {{ section.settings.desc }}
            </div>
            <div class="description_2">
                {{ section.settings.desc_2 }}
            </div>
            <div class="button__container">
                <a class="promo__button"href="{{ section.settings.button_url }}">{{section.settings.button_text  }}</a>
            </div>
          
        </div>
    </div>
</div>
<style>
    {% if section.settings.section_background != blank %}
 .banner-{{section.id}} {
    background-image:url({{section.settings.section_background | img_url: 'master'}});
    background-size: cover;
    min-height: 450px;
    height: 100vh;
   
    position:relative;
    display: flex;
    align-items: center;
 }
{% endif %}
.banner-sub h4 {
    font-weight: 500;
    font-size:30px;
      letter-spacing:2px;
}
.button__container {
    background:#fff;
}
.button__container a{

    font-weight: 700;
    font-size:22px;
}
.banner-contss {
    text-align: center;
    padding: 0 80px 50px;
}
.button__container {
    background: #fff;
    width: fit-content;
    margin: auto;
    padding: 10px 20px;
}
.promo__button {
    color:#343741;
}

.banner-sub h2 {
    font-weight: 700;
    font-size:3.25rem;
    letter-spacing:0;
}

.description h1:first-child {
    
     font-weight: 100;
    font-size:3rem;
    letter-spacing:0;
}

.description p.sub_percent {
        
    font-weight: 100;
    font-size:2rem;
    letter-spacing:0;
}

.description {
    margin-bottom:1rem;
}
.description_2 {
    margin-bottom: 2rem;
    font-size: 18px;
}

.banner-row.content-2{
    background-color: {{ section.settings.card_bg_color }};
    padding: 0;
    max-width: 830px;
    
}
      @media (max-width: 767px) {
       .banner-{{section.id}} {
         height: 950px;
       }
      }
      @media (max-width: 768px) {
      .banner-row.content-2 {
        margin: 20px;
    }
    .banner-contss {
       
        padding: 0 30px 50px;
    }
}

@media (max-width: 425px) { 
    .banner-{{section.id}}.banner-wrapper.banner {
        height: 668px;
    }
    .banner-sub h4 {
        font-size:20px;
    }
    .banner-contss {
        padding: 0 25px 50px;
    }
    .banner-sub h2 {
        font-size: 2rem;
    }
    .description h1:first-child {
        font-size: 2.5rem;
    }
    .description p.sub_percent {
        font-weight: 100;
        font-size: 1.5rem;
    }
    .description_2 {
        margin-bottom: 1.5rem;
        font-size: 16px;
    }
}

</style>
{% schema %}
{
    "name": "Custom Banner 2",
    "settings": [
        {
            "type": "header",
            "content": "Banner Titles"
        }, 
        {
            "type": "text",
            "id": "title_2",
            "label": "Title"
        },
        {
            "type": "text",
            "id": "subtitle_2",
            "label": "Subtitle"
        }, 
        {
            "type": "textarea",
            "id": "desc",
            "label": "Description"
        }, 
        {
            "type": "text",
            "id": "desc_2",
            "label": "Description"
        }, 
        {
            "type": "image_picker",
            "id": "banner_image",
            "label": "image"
        }, 
        {
            "type": "url",
            "id": "button_url",
            "label": "Button URL"
        },
        {
            "type": "text",
            "id": "button_text",
            "label": "Button Text"
        },
        {
            "type": "header",
            "content": "Section Settings"
        }, {
            "type": "image_picker",
            "id": "section_background",
            "label": "Section Background"
        },
        {
            "type": "color_background",
            "id": "card_bg_color",
            "label": "Card color",
            "default": "linear-gradient(#ffffff, #000000)"

          }
    ],
    "presets": [
        {
            "name":"Custom Banner 2"
        }
    ]
}
{% endschema %}