mobile hero image

{% if section.settings.mobile_slideshow == 'hero' %}
<div class="grid__item medium-down--show mobile-hero--wrapper  large--hide medium--one-whole small--one-whole two-fifths-width ">      
        <div class="hero-container">
          {% if section.settings.mobile_masonry_hero != blank %}
          <img src="{{ section.settings.mobile_masonry_hero | img_url: "1920x"}}">
          {% else %}
          <img src="{{ section.settings.mobile_masonry_hero | img_url: "1920x"}}">
          {{ "banner-placeholder.png" | asset_url }}
          {% endif %}
          
         <div class="text-overlay">
          <h1 class="mobile-hero-h {{section.settings.mobile_copy_color}}" >{{ section.settings.title }}</h1>
          {% if link_1 != blank or link_2 != blank or link_3 != blank %}
          <ul class="mobile-hero-ul">
            {% if link_1 %}
              <li class="mobile-hero-h3"><a href="{{ link_1 }}" class="mobile-hero-link  {{section.settings.mobile_link1_text}}">{{ link_1_text }}</a></li>
            {% endif %}
            {% if link_2 %}
              <li class="mobile-hero-h3"><a href="{{ link_2 }}" class="mobile-hero-link  {{section.settings.mobile_link2_text}}">{{ link_2_text }}</a></li>
            {% endif %}
            {% if link_3 %}
              <li class="mobile-hero-h3"><a href="{{ link_3 }}" class="mobile-hero-link  {{section.settings.mobile_link3_text}}">{{ link_3_text }}</a></li>
            {%endif%}
          </ul>
          {% endif %}
        </div>
        </div>
</div>
{% endif %}