/* Simple solid backgrounds for the three homepage comic panels.
   Keep the comic framing, live text, and existing quokka artwork; no generated CSS scenery. */

.benefit-card:nth-child(1)::after {
  background: #bde8f2;
}

.benefit-card:nth-child(2)::after {
  background: #f5d66f;
}

.benefit-card:nth-child(3)::after {
  background: #a9dfc5;
}

/* This stylesheet loads last: override the legacy global image caps and make
   the existing quokka artwork fill the open right/bottom area of each panel. */
.benefit-card picture {
  position: absolute;
  z-index: 3;
  right: -16%;
  bottom: -10%;
  width: 88%;
  max-width: none;
  max-height: none;
  margin: 0;
}

.benefit-card picture img,
.benefit-card:last-child picture img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: contain;
  object-position: right bottom;
  filter: contrast(1.08) saturate(1.08) drop-shadow(4px 4px 0 rgba(23,21,16,.72));
  transform: none;
}

@media (max-width: 680px) {
  .benefit-card picture {
    right: -18%;
    bottom: -9%;
    width: 92%;
  }

  .benefit-card picture img,
  .benefit-card:last-child picture img {
    max-height: none;
  }
}