{{-- 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>

                </div>

                {{-- Author --}}
                @if(isset($post->author))

                    <div class="author">

                        {{-- Profile picture --}}
                        @if( ! $post->author->images->isEmpty())
                            <div class="profile-image" style="background-image: url({{ $post->author->images->first()->thumb_image_url }})"></div>
                        @endif

                        {{-- Info --}}
                        <div class="info">
                            Door <span class="name">{!! $post->author->name !!}</span><br />
                            {!! $post->date->format('d / m / Y')  !!}
                        </div>

                    </div>

                @endif

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