/* ========================================
   Base (mobile small <480px)
   ======================================== */
.info-image-accent-right {
  margin-bottom: 3rem;
}

.info-image-accent-right .accent-stage {
  position: relative;
  inline-size: 100%;
  min-block-size: 1px;
  overflow: visible;
}

/* Centered image */
.info-image-accent-right .image-wrap {
  inline-size: clamp(12rem, 64vw, 20rem);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.info-image-accent-right .image-wrap img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0 2rem; /* simpler on mobile */
}

/* Accents base */
.info-image-accent-right .accent {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  aspect-ratio: 1 / 1;
}

/* Left accent (mobile) */
.info-image-accent-right .accent.a1 {
  inline-size: 6rem;
  top: -12px;
  left: 0;
  background: var(--citrus-green);
  border-radius: 0 2rem 0 2rem;
  z-index: 3;
}

/* Bottom-right accent (mobile) */
.info-image-accent-right .accent.a2 {
  inline-size: 5rem;
  bottom: -12px;
  right: 0;
  background: var(--sky-blue);
  border-radius: 0 2rem 0 2rem;
  z-index: 3;
}

/* ========================================
     Mobile Medium (480–639px)
     ======================================== */
@media (min-width: 30rem) and (max-width: 39.9375rem) {
  .info-image-accent-right .image-wrap {
    inline-size: clamp(13rem, 70vw, 20rem);
  }
  .info-image-accent-right .accent.a1 {
    inline-size: 6.5rem;
    left: 2.5rem;
  }
  .info-image-accent-right .accent.a2 {
    inline-size: 5.5rem;
    right: 3.25rem;
  }
}

/* ========================================
     Mobile Large (640–767px)
     ======================================== */
@media (min-width: 40rem) and (max-width: 47.9375rem) {
  .info-image-accent-right .image-wrap {
    inline-size: clamp(14rem, 68vw, 21rem);
  }
  .info-image-accent-right .accent.a1 {
    inline-size: 7rem;
    left: 5.5rem;
  }
  .info-image-accent-right .accent.a2 {
    inline-size: 6rem;
    right: 6.5rem;
  }
}

/* ========================================
     Tablet Portrait (768–1023px)
     ======================================== */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .info-image-accent-right .image-wrap {
    inline-size: clamp(16rem, 60vw, 22rem);
  }
  .info-image-accent-right .accent.a1 {
    inline-size: 9rem;
    left: 3.75rem; /* don’t stick to container edge */
    border-radius: 0 1.5rem 0 1.5rem;
  }
  .info-image-accent-right .accent.a2 {
    inline-size: 8rem;
    right: 5rem;
    border-radius: 0 1.5rem 0 1.5rem;
  }
}

/* ========================================
     Desktop (≥1024px)
     ======================================== */
@media (min-width: 64rem) {
  .info-image-accent-right .image-wrap {
    inline-size: clamp(20rem, 42vw, 25rem);
    margin-inline-end: 6.95rem;
    margin-inline-start: auto;
  }

  .info-image-accent-right .image-wrap img {
    border-radius: clamp(1.5rem, 5vw, 4rem) 0;
  }

  .info-image-accent-right .accent.a1 {
    inline-size: clamp(9rem, 22vw, 16rem);
    top: 0;
    right: 8rem;
    border-radius: 0 clamp(1.5rem, 5vw, 4rem) 0 clamp(1.5rem, 5vw, 4rem);
  }

  .info-image-accent-right .accent.a2 {
    inline-size: clamp(7rem, 10vw, 9rem);
    bottom: 0;
    right: 0;
    border-radius: 0 clamp(1.5rem, 5vw, 4rem) 0 clamp(1.5rem, 5vw, 4rem);
  }
}