{{-- This div has a min-and-max height to adjust to the viewport --}}
<div class="height-controller">

    @include('site.partials.scrollHinter',['target'=>'intro'])

    {{-- Div with height 0, padding bottom 56% for 16:9 ratio--}}
    <div class="ratio-controller">

        {{-- Position absolute width 100% and height 100%--}}
        <div class="wrapper">

            {{-- Position absolute image in background --}}
            <img class="stretch" src="{{ $image }}" alt="{{ $title }}" />

            {{-- Container placed on grid for a perfect layout --}}
            <div class="hero-text-layout contained-layout">

                <div class="hero-text-flex-column  @if(isset($doubleRowTitle) && $doubleRowTitle) hero-text-double-row @endif">

                    <div class="title">{!! $title !!} </div>
                    <span class="tags">
                        @if(is_array($tags))

                            @foreach($tags as $tag)
                                <span class="scroll-to-target tag" data-target="intro">{{ $tag }}</span>
                            @endforeach

                        @endif
                    </span>

                </div>


            </div>
        </div>
    </div>
</div>