<style>
	.cols-3 {
		display: flex;
		flex-direction: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}

	@media (max-width: 767px) {
		.cols-3 {
			flex-direction: column !important;
		}
	}
</style>
<p>&nbsp;</p>
<p>{articles category="Agendas" ordering="commence-le ASC, title ASC" limit="3"}</p>
<p>{if first}</p>
<div class="cols-3">
	<p>{/if}</p>
	<div class="MY_CLASS panel">
		<p>[image-main-blog render_class="MY_CLASS"]</p>
		<h2 class="media-heading">[title]</h2>
		<p>[commence-le format="d-m-Y" render_class="MY_CLASS"]</p>
		<p>[readmore text="Voir" class="MY_CLASS"]</p>
	</div>
	<p>{if last}</p>
</div>
<p>{/if}</p>
<p>{/articles}</p>
<p>&nbsp;</p>
<p style="text-align: center;"><a href="MY_LINK" target="_self" class="MY_CLASS" dir="ltr">See all details</a></p>

@media screen and (max-width: 768px) and (min-width: 320px) {
.box-evenements-accueil {
    padding: 10px;
}
  .cols-3 {
    display: initial !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
}