{% set showcase_image = page.media.images|first.grayscale().contrast(20).brightness(-125).colorize(-35,81,122) %}
{% if showcase_image %}
	<div class="modular-row showcase flush-top" style="background-image: url({{ showcase_image.url }});">
{% else %}
<div class="modular-row showcase">
{% endif %}
    {{ content }}

    {% for button in page.header.buttons %}
        <a class="button{% if button.primary %} primary{% endif %}" href="{{ button.url }}">{{ button.text }}</a>
    {% endfor %}

</div>

{% set showcase_image = page.media.images|first.grayscale().contrast(20).brightness(-125).colorize(-35,81,122) %}
{% if showcase_image %}
	<div class="modular-row showcase{% if page == page.parent.collection.first %} flush-top{% endif %}" style="background-image: url({{ showcase_image.url }});">
{% else %}
<div class="modular-row showcase">
{% endif %}
    {{ content }}

    {% for button in page.header.buttons %}
        <a class="button{% if button.primary %} primary{% endif %}" href="{{ button.url }}">{{ button.text }}</a>
    {% endfor %}

</div>

Fix showcase template overlapping when not at top
Fix showcase template overlapping when not at top

Showcase template applies "flush-top" class which applies negative margin to get the image under the navigation bar.
But this should only be applied when the showcase is at top.