@foreach($categories AS $category)
<div class="category-articles-wrapper news small col-md-3 col-sm-4">
    <!--h4 class="category-title  text-uppercase">
        <a href="{{ $category->link }}" target="_blank">
            {{ $category->title }}
            <span class="gray title-addon">News</span>
        </a>
    </h4-->
	<p class="category footcatgory bg-1 text-uppercase bold font-firasans">
                    <a href="{{ $category->link }}" target="_blank"><span class="">{{   $category->title  }}</span></a>
                </p>
    <div class="clearfix"></div>
    <div class="big-post article">
        <div class="col-md-4 col-sm-4 col-xs-3 image-section no-padding">
            <a href="{{ $category->top_article->link }}"> <div class="image-wrapper">
                <img src="https://maritime-executive.com{{ ($category->top_article->article_image ? $category->top_article->article_image->source : '') }}" alt="{{ ($category->top_article->article_image ? $category->top_article->article_image->alternate_text : '') }}" class="img-full" />
            </div></a>
        </div>
        <div class="col-md-8 col-xs-9 title-wrapper no-padding">
            <a href="{{ $category->top_article->link }}" target="_blank" class="title font-firasans">
                {{ $category->top_article->title }}
            </a>
        </div>
    </div>
    <div class="clearfix"></div>
    <ul class="other-category-articles-wrapper no-padding">
        @foreach($category->articles AS $article)
        <li class="article">
            <a href="{{ $article->link }}" target="_blank" class="title font-roboto">{{ $article->title }}</a>
        </li>
        @endforeach
    </ul>
</div>
@endforeach