{% assign news_by_year = site.news | sort: "date" | reverse | slice: 0, include.limit | group_by_exp: "item", "item.date | date: '%Y'" -%}

<div class="my-3 bg-white shadow-sm rounded-xl">
    <h6 class="p-3 mb-0 border-bottom border-gray"><i class="fas fa-rss"></i> News</h6>
    <div class="px-3 pb-1 small">
        {% for year in news_by_year %}
        <div class="media py-1 {% if not_first -%}border-top border-gray{%- endif %}">
            {% assign not_first = true %}
            <div class="mr-3 text-muted my-1">{{ year.name }}</div>
            <div class="media-body">
                {% for item in year.items %}
                <div class="my-1 d-flex">
                    <div>{{ item.title }}</div>
                    <div class="ml-auto mt-auto text-muted no-break"><i>{{ item.date | date: "%b %d" }}</i></div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>