{% assign items = paginator.posts | sort: 'date_modified' | reverse %}

<section class="hub-section hub-section-sm section-bloglist">
	<div class="container">
		{% for item in items limit: 1 offset:2 %}
		<div class="row align-items-start">
			
			<div class="col-lg-6">
				{% if item.article_body.content.heading.image.i_image %}
				{% picture thumbnail_image collections/{{ item.article_body.content.heading.image.i_image }} alt="{{ item.article_body.content.heading.t_title | strip_htm }}" class="card-img" %}
				{% endif %}
				<div class="py-2">
					<div class="mb-1 initialism text-muted small">
						{{ item.category | strip_html}}
					</div>
					<h4 class="mb-2">
						<a class="h5 font-weight-normal text-dark" href="{{ site.url }}{{ item.url }}" title="{{item.article_body.content.heading.t_title}}">
							{{ item.article_body.content.heading.t_title  | strip_html }}
						</a>
					</h4>
					<p class="mb-2">
						{% if item.article_body.content.heading.t_description %}
						{{ item.article_body.content.heading.t_description | strip_html | truncate: 180 }}
						{% endif %}
					</p>
					<a href="{{ site.url }}{{ item.url }}">{{site.data.languages[page.language]global.t_read_more}} <i class="angle-right-icon fa-sm ml-1"></i></a>
				</div>
			</div>
			<div class="col-lg-6">
				{% assign key =  page.language | append:'_articles' %}
				{% assign news = site[key]  | sort: "date" | reverse %}
				{% for item in news limit: 4 %}
				<div class="media">
				  <div class="text-center mr-4">
					{% if item.article_body.content.heading.image.i_image %}
					    {% picture thumbnail_sm collections/{{ item.article_body.content.heading.image.i_image }} alt="{{ item.article_body.content.heading.t_title | strip_htm }}" class="card-img" %}
					{% endif %}
				  </div>
				  <div class="media-body"> <span class="badge badge-dark border text-white">{{ item.category | strip_html}}</span>
					<h6 class="mb-0"><a href="{{ site.baseurl }}{{ item.url }}">
						{{ item.article_body.content.heading.t_title  | strip_html }}
					</a></h6>
					<p> {% if item.article_body.content.heading.t_description %}
						{{ item.article_body.content.heading.t_description | strip_html | truncate: 70 }}
						{% endif %}
					  <a href="{{ site.url }}{{ item.url }}">{{site.data.languages[page.language]global.t_read_more}} <i class="angle-right-icon fa-sm ml-1"></i></a>
					</p>
				  </div>
				</div>
				{% endfor %}
			</div>
		</div>
		{% endfor %}
	</div>
</section>

<section class="hub-section hub-section-sm">
	<div class="container">
		<div class="row">
		<div class="col-md-12">
		<div class="card-columns">
			{% for item in items %}
				<div class="card" data-tag='{{ item.category }}'>
					{% if item.article_body.content.heading.image.i_image %}
						{% picture thumbnail_image collections/{{ item.article_body.content.heading.image.i_image }} alt="{{ item.article_body.content.heading.t_title | strip_htm }}" class="card-img" %}
					{% endif %}
					<div class="card-body pb-2 h-100">
						{% if item.category %}
						<div class="mb-1 initialism text-muted small">
							{{ item.category | strip_html}}
						</div>
						{% endif %}
						<a class="h5 mb-2 font-weight-normal line-height-lg text-dark stretched-link"
							href="{{ site.url }}{{ item.url }}" title="{{item.t_meta_title}}">
							{{ item.article_body.content.heading.t_title  | strip_html | truncate: 50 }}
						</a>
						{% if item.date_modified %}
						<div class="mt-2 mb-3 text-muted small">
							<i class="clock-time-icon mr-2"></i>
							{{ item.date_modified | date: '%B %d, %Y' }}
						</div>
						{% endif %}
						<p class="card-text text-secondary text-sm">
							{% if item.article_body.content.heading.t_description %}
						{{ item.article_body.content.heading.t_description | strip_html | truncate: 200 }}
						{% endif %}
						</p>
					</div>
					
				</div>
			{% endfor %}
		</div>
	 </div>

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