<div class="featured-case {{ $case->key }} flex-col {{ $class or '' }}">
    <a href="/cases/{{ $case->translation->slug }}">
        <img class="stretch preload" src="{{ $case->thumbnail }}" alt="{!! $case->translation->name !!}"/>

        <div class="color-overlay" style="background-color: {{ $case->primary_color }};"></div>

        {{-- Flex container to center the content --}}
        <div class="text-overlay">

            {{-- Flex item with title and tags --}}
            <div class="description">

                <span class="title">{!! $case->translation->name !!}</span>

                @include('site.partials.cases.caseTags',[
                    'tags'=> Lang::get('site/cases/' . $case->key . '.tags')
                ])

                <div class="read-more">
                    <span class="read-more__label">Lees meer</span>
                    <span class="arrow"></span>
                </div>

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