/* Home page "Explore Our Events" teaser: fixes two gaps in the static theme's own
   CSS for this component (assets/css/main.css .news-wrapper rules) rather than
   working around them inline —
     1. .news-image img and .news-thumb (side cards) had no object-fit/fixed box,
        so real photos of varying source dimensions rendered at inconsistent sizes
        instead of a uniform crop.
     2. The big card and the two stacked side cards had no shared height contract,
        so the big card's height didn't track the combined height of the two side
        cards the way the static design intends.
   Scoped to the home page's news-wrapper only — doesn't touch the events listing
   page's own (already-consistent) card grid. */

.news-wrapper .row {
  align-items: stretch;
}

.news-wrapper .news-single-items {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.news-wrapper .news-single-items .news-image {
  flex: 1 1 auto;
  min-height: 260px;
  overflow: hidden;
  border-radius: 8px;
}
.news-wrapper .news-single-items .news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.news-wrapper .news-right-col {
  display: flex;
  flex-direction: column;
}
.news-wrapper .news-right-items {
  flex: 1 1 0;
  align-items: stretch;
  margin-bottom: 0 !important;
}
.news-wrapper .news-right-items:not(:last-child) {
  margin-bottom: 30px !important;
}
.news-wrapper .news-right-items .news-thumb {
  flex: 0 0 230px;
  width: 230px;
  aspect-ratio: 230 / 236;
  border-radius: 8px;
  overflow: hidden;
}
.news-wrapper .news-right-items .news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

@media (max-width: 767px) {
  .news-wrapper .news-right-items .news-thumb {
    width: 100%;
    flex: 1 1 100%;
  }
  .news-wrapper .news-right-items .news-thumb img {
    height: 160px;
  }
}