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

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

        @if($post->images->isNotEmpty())
            <div class="background-image" style="background-image: url('{{ $post->images->first()->original_image_url }}')"></div>
        @else
            {{-- Default image? --}}
            <figure></figure>
        @endif

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

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

                <div class="title-holder">

                    <a class="blog-title" href="/blog">Blog</a>

                    <h1>{{ $post->translation->name }}</h1>

                    <a class="button stroked white" href="/blog/{{$post->translation->slug}}">Lezen</a>

                </div>

                {{-- todo: Slider (stage 2) --}}

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