.egbw-frame{
  /* The frame is the background image (your border). Use contain so the border fits inside.
     Use aspect-ratio for predictable responsive sizing. Fallbacks removed to avoid excessive
     mobile height that breaks container flow. */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 100%;
  max-width: 100%;
  position: relative;
  aspect-ratio: 571 / 400; /* width / height from the supplied artwork */
  box-sizing: border-box;
  overflow: hidden;
  z-index: 0;
  min-height: 1px;
}

.egbw-frame .egbw-inner{
  /* Inner area holds the photo. Use per-side inset values for pixel-perfect placement. */
  position: absolute;
  left: var(--egbw-inset-left, 0%);
  top: var(--egbw-inset-top, 6%);
  right: var(--egbw-inset-right, 0%);
  bottom: var(--egbw-inset-bottom, 6%);
  box-sizing: border-box;
  overflow: hidden;
  display: block;
  background-color: transparent;
  z-index: 1;
}

.egbw-frame .egbw-inner img.egbw-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: var(--egbw-object-fit, cover);
  object-position: var(--egbw-object-position, center center);
}

/* Ensure the frame doesn't force parent overflow and that inner images clip properly. */
.egbw-frame{ display: block; max-width: 100%; }
.egbw-frame img.egbw-img{ max-width: none; }

/* Fallback for browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 1/1) {
  .egbw-frame{
    /* padding-top = height/width * 100% */
    padding-top: 70.05%; /* 400 / 571 */
    height: 0;
  }
}

.egbw-frame .egbw-placeholder{
  color: #666;
  font-size: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  z-index: 1;
}

/* No aggressive padding-based height changes — aspect-ratio handles sizing.
   Keep a small tweak for very narrow screens if needed. */
@media (max-width: 360px){
  .egbw-frame{ aspect-ratio: 4 / 5; }
}

/* Defensive mobile fix: ensure the frame creates a stacking context and leaves space
   so following headings or content cannot overlap the framed image. */
@media (max-width: 768px){
  /* Do NOT create a new stacking context or force high z-index; that can hide
     subsequent content. Instead, give the frame extra bottom spacing and ensure
     the next sibling is pushed down and visible. */
  .egbw-frame{
   z-index: auto !important;
   /* Removed margin-bottom which caused layout issues on mobile; let parent
     container control spacing. If you need spacing, adjust the column padding
     or use a widget control. */
   margin-bottom: 0 !important;
  }
  /* Ensure the following widget is positioned normally and offset if it had
     negative margins or absolute positioning; this is a safe, non-destructive
     fallback. */
  .egbw-frame + *{
  margin-top: 0 !important;
  position: static !important;
  z-index: auto !important;
  }
}