/* home-cards.v2.css : homepage programmes strip and blog cards (see lib/enhance/transforms/home-cards.ts).
 * The Bali card is the Thailand card's markup. Its widget carries the Thailand widget's Elementor class, so the stored
 * stylesheet (post-15211.css) already paints it; only the container's width, which the stored CSS sets per container id,
 * needs a rule here. Widths and gaps copy the other four cards: one column on phones, two from 768px, three from 1025px. */

.elementor-element.yn-home-bali {
  --display: flex;
  --gap: 10px 10px;
  --row-gap: 10px;
  --column-gap: 10px;
  --border-radius: 0px 0px 0px 0px;
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  overflow: visible;
}

@media (min-width: 768px) {
  .elementor-element.yn-home-bali {
    --width: calc(33.33% - 20px);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element.yn-home-bali {
    --width: calc(50% - 15px);
  }
}

/* Desktop: the strip is seven items (heading block, Goa, Thailand / Bali, Thailand retreat, Sri Lanka retreat, call box).
 * At three across the call box sat alone on a third row; the second row goes four across instead (gap 30px, so each
 * card is a quarter of the row less three gaps shared by four). Same selector weight as the stored per-id rules, later. */
@media (min-width: 1025px) {
  .elementor-element.yn-home-bali,
  .elementor-15211 .elementor-element.elementor-element-6c79bb2,
  .elementor-15211 .elementor-element.elementor-element-f4be14d,
  .elementor-15211 .elementor-element.elementor-element-b492077 {
    --width: calc(25% - 22.5px);
  }
}

/* Blog cards: the new covers have mixed shapes; crop them to the 2:1 frame the captured 2024 thumbnails used. */
.yn-home-post .elementskit-entry-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}