/* ============================
   Frame Containers
   ============================ */

/* Gold Frame */
.gold-frame {
  position: relative;
  display: inline-block;
  border: 4px outset  #f0b541;
  border-radius: 3%;
  outline: 4px outset  #ffee83;
}

/* Silver Frame */
.silver-frame {
  position: relative;
  display: inline-block;
  border: 5px solid   #a3a7c2;
  border-radius: 15%;
  outline: 3px solid  #dfe0e8;
}

/* Bronze Frame */
.bronze-frame {
  position: relative;
  display: inline-block;
  border: 3px outset  #ab5130;
  border-radius: 1%;
  outline: 2px outset  #cf752b;
}

/* ============================
   Constrain the <img> inside its frame
   ============================ */

.gold-frame img,
.silver-frame img,
.bronze-frame img {
  display: block;        /* no inline‐baseline gaps */
  width: 200px;           /* natural size up to max- */
  height: 200px;
  object-fit: contain;   /* preserve aspect ratio, no cropping */
}