{{-- shortcut --}}
@push('style-after-global')
<style>
.shortcut-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
</style>
@endpush

<div style="margin: 1rem 0rem 1rem 0rem; padding: 0rem 1rem 0rem 1rem;">
    <div class="card-container">

        <section id="widgets-statistics">

            <div class="row row-cols-12">

                {{-- shortcut content --}}
                @if ($shortcut_widgets)

                    @foreach($shortcut_widgets as $row)
                    <div class="card-body">
                        <div class="card-body text-center" style="border-radius: 0.1rem; box-shadow: 0 1px 10px 0 rgba(192, 192, 192);">
                            <div class="badge-circle badge-circle-lg badge-circle-light-info mx-auto my-1">
                                <img class="rounded-circle" src="{{ url( $row['images_url']) }}" height="64" width="64">
                            </div>
                            <p class="mb-0 font-size-small shortcut-title">
                                <a href="/article/{{ $row['slug'] }}" style="color: #056e4f;">
                                    <strong>{{ $row['title'] }}</strong>
                                </a>
                            </p>
                        </div>
                    </div>
                    @endforeach

                @endif
                {{-- end shortcut content --}}

            </div>

        </section>

    </div>
</div>
{{-- end shortcut --}}