{% if page.layout == "home-infographic" and site.data.theme.featured-image %}
<style>
#home-banner {
    background-image: url('{{ site.data.featured_item.src | relative_url }}');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: {{ site.data.theme.home-banner-image-position | default: 'center' }};
}
#home-title-box {
    padding-top: {{ site.data.theme.home-title-y-padding | default: '5em' }};
    padding-bottom: {{ site.data.theme.home-title-y-padding | default: '5em' }};
}
@media screen and (max-width: 576px) {
    #home-title-box {
        padding-top: min({{ site.data.theme.home-title-y-padding | default: '5em' }}, 32vh);
        padding-bottom: min({{ site.data.theme.home-title-y-padding | default: '5em' }}, 32vh);
    }
}
</style>

<div id="home-banner" class="container-fluid mb-0 p-0">
  <div id="home-title-box" class="position-relative">
    <div class="p-2 text-white bg-dark bg-opacity-75 d-inline-block">
      {% if site.organization-logo-nav %}
      <a class="d-none d-md-block" href="{{ site.organization-link }}">
        <img id="home-banner-logo" src="{{ site.organization-logo-nav | relative_url }}" alt="{{ site.organization-name | escape }} home">
      </a>
      {% endif %}
      <h1 class="display-4 m-0">{{ site.title }}</h1>
      {% if site.tagline %}<p class="mb-0">{{ site.tagline }}</p>{% endif %}
    </div>
  </div>

  {% unless site.data.theme.featured-image contains '/' %}
  <div class="featured-image-label">
    <a href="{{ site.data.featured_item.link | relative_url }}"
       title="{{ site.data.featured_item.alt | escape }}">
       Featured Image
    </a>
  </div>
  {% endunless %}
</div>
{%- else -%}
  <div class="container">
    <div class="row align-items-center">
      <div id="title" class="{% if site.organization-logo-banner %}col-md-9{% else %}col-12{% endif %}">
        <h1 class="mt-2"><a class="text-dark" href="{{ '/' | relative_url }}">{{ site.title }}</a></h1>
        {% if site.tagline %}<p>{{ site.tagline }}</p>{% endif %}
      </div>
      {% if site.organization-logo-banner %}
      <div class="col-md-3 d-none d-lg-block text-end">
        <a class="btn btn-outline-light" href="{{ site.organization-link }}">
          <img class="img-fluid" src="{{ site.organization-logo-banner | relative_url }}" title="{{ site.organization-name }}" alt="{{ site.organization-name | escape }} home">
        </a>
      </div>
      {% endif %}
    </div>
  </div>
{%- endif -%}
