{# ===== Banner Event Cards ===== #}
{# Card = 1:1 v2 event card. Row/cols erven globale .RecentBlogRow/.RecentBlogCol regels. #}
.bannerEventCards { position: relative; }
{# Zelfde breedte als .blog-listing-main (event cards container) #}
.bannerEventCardsInner { max-width: 1008px; width: 100%; margin: 0 auto; }
.bannerEventCardsTop { margin-bottom: 40px; } /* mobile fallback */
.bannerEventCards .bannerEventCardDesc { font-size: 16px; line-height: 1.6; color: #000; } /* mobile */

@media (min-width: 1200px) {
  .bannerEventCardsInner { max-width: 70vw; }
  .bannerEventCards .bannerEventCardDesc { font-size: 1.111vw; } /* 16px @ base 1440, alleen echte desktop */
}

{# Mobile (<=767) gaps komen van .mobilept15 util (15px), net als event cards #}

@media (min-width: 768px) {
  /* Desktop: alles in vw (base 1440) */
  .bannerEventCardsTop { margin-bottom: 2.778vw; }                 /* 40px titel -> cards */
  .bannerEventCards .RecentBlogTitle { padding-top: 1.667vw; }     /* 24px afbeelding -> titel */
  .bannerEventCards .bannerEventCardDesc { padding-top: 1.389vw; } /* 20px titel -> description */
  .bannerEventCards .RecentBlogCtaBox { padding-top: 1.389vw; }    /* 20px description -> knop/tijd */
}

@media (max-width: 767px) {
  .bannerEventCards .bannerEventCardDesc { padding-top: 8px; } /* override mobilept15 */
}