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

.tab-image-locations .accent-stage {
  position: relative;
  inline-size: 100%;
  min-block-size: 1px;
  overflow: visible;
  margin: 0 0 1rem;
}

/* Image container - left-aligned within accent-stage */
.tab-image-locations .image-wrap {
  max-width: 40rem;
  position: relative;
  z-index: 2;
  margin-right: auto; /* Left-align the image */
}

.tab-image-locations .image-wrap img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0 3rem 0 3rem; /* rounded opposite corners */
}

/* Accent positioned right-aligned within accent-stage */
.tab-image-locations .accent {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  aspect-ratio: 1 / 1;
  bottom: -0.75rem;
  right: 0; /* Right-aligned to container edge */
  background: var(--citrus-green);
  border-radius: 0 3rem 0 3rem;
  width: 11rem; /* Larger size across all breakpoints */
  height: 11rem;
}

.info-block .info-image-block-locations {
  max-inline-size: 44rem;
  margin: 0;
}

/* ========================================
       All breakpoints use the same accent size
       ======================================== */