<style scoped>
.hero-scoped {
    background:
        {% if hero_image %}url({{ hero_image.url }}) {{ hero_horizontal_position }}% {{ hero_vertical_position }}%/{{ hero_size }} no-repeat{% endif %}
        {% if hero_background_image %}, url({{ hero_background_image.url }}) repeat{% endif %}
        {% if hero_background_color %} {{ hero_background_color }}{% endif %};
    height: {{ hero_height }}px;
}

@media (max-height: 900px), (max-width: 700px) {
    .hero-scoped {
        background:
            {% if hero_image_small %}url({{ hero_image_small.url }}) {{ hero_horizontal_position }}% {{ hero_vertical_position }}%/{{ hero_size }} no-repeat{% endif %}
            {% if hero_background_image_small %}, url({{ hero_background_image_small.url }}) repeat{% endif %}
            {% if hero_background_color %} {{ hero_background_color }}{% endif %};
        height: {{ hero_height_small }}px;
    }
}
</style>
<section id="{{ id }}" class="section hero hero-scoped">
    <div class="image-overlay"></div>
    <section class="container {{ grid_size }}" style="text-align: {{ page.header.hero_align|default('center') }}">
        {{ content }}
    </section>
</section>
