/* === Hero slider (desktop) : change image from 1:1 to 4:3 === */
@media (min-width: 1024px) {
  /* Image wrapper to 4:3 */
  .home .hero-slick .grid > .order-1 .relative {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3 !important;
    height: auto !important;      /* override any fixed height utilities */
    overflow: hidden;
  }
  /* Make inner image fill wrapper */
  .home .hero-slick .grid > .order-1 .relative > img,
  .home .hero-slick .grid > .order-1 .relative picture > img,
  .home .hero-slick .grid > .order-1 .relative .wp-post-image {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
  }
}

/* === Hero title: ~1.2x current custom size ===
   Current custom sizes defined in main.css were:
   base: ~1.35rem; desktop: 2rem.
   We increase by ~20% → base ≈ 1.62rem, desktop ≈ 2.4rem.
*/
.home .hero-slick h1.font-heading {
  font-size: 1.62rem !important;
  line-height: 1.35;
}
@media (min-width: 1024px) {
  .home .hero-slick h1.font-heading {
    font-size: 2.75rem !important;
    line-height: 1.2;
  }
}