{% 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 {
        max-height: 500px;
    }
}
</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-center text-white bg-dark bg-opacity-75">
            {% if site.organization-logo-nav %}
            <a class="d-none d-md-block" href="{{ site.organization-link }}" target="_blank" rel="noopener">
                <img id="home-banner-logo" src="{{ site.organization-logo-nav | relative_url }}" alt="{{ site.organization-name | escape }} home" >
            </a>{% endif %}
            <h1 class="display-4">{{ site.title }}</h1>
            {% if site.tagline %}<p class="mb-0">{{ site.tagline }}</p>{% endif %}
        </div>
        {% unless site.data.theme.featured-image contains '/' %}
        <div class="position-absolute bottom-0 end-0 px-2 bg-dark bg-opacity-75">
            <a class="text-white fs-6" href="{{ site.data.featured_item.link | relative_url }}" title="{{ site.data.featured_item.alt | escape }}">Featured Image</a>
        </div>{% endunless %}
    </div>
</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="{{ site.baseurl }}/" >{{ 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 }}" target="_blank" rel="noopener">
                <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 -%}