.hc-benefits-hero {
  isolation: isolate;
  contain: paint;
  background-color: #071021;
  background-repeat: no-repeat;
  background-clip: padding-box;
}

/* The Benefits hero already owns purpose-built artwork. Hide the generic
   dashboard decoration that would otherwise add a second animated image. */
.hc-benefits-hero > .dashboard-art-layer {
  display: none !important;
}

.dashboard-community-shell .hc-benefits-v2 article {
  grid-template-rows: clamp(170px, 15vw, 210px) 1fr !important;
  min-height: 380px !important;
}

/* The source is a 3 x 2 atlas made from square illustrations. Scale only by
   width so each atlas cell keeps its 1:1 ratio, then crop inside the card. */
.hc-benefit-art {
  min-width: 0;
  background-color: #0a1427;
  background-size: 300% auto !important;
  background-repeat: no-repeat;
  transform-origin: center;
}

@media (max-width: 760px) {
  .dashboard-community-shell .hc-benefits-v2 article {
    grid-template-rows: clamp(190px, 58vw, 260px) 1fr !important;
  }
}