/* =========================================
   Breakout Images – Responsive + Centred
========================================= */


img[class*="breakout-"] {
  display: block;
  height: auto;
  max-width: none !important;

  position: relative;
  left: 50%;
  transform: translateX(-50%);

  margin-block: 0 !important;
margin-top: var(--img-mt, 1.5rem) !important;
margin-bottom: var(--img-mb, 1.5rem) !important;
}


/* Width presets with viewport protection */
.breakout-1100 {
  width: min(1100px, calc(100vw - 2rem));
}
.breakout-1150 {
  width: min(1150px, calc(100vw - 2rem));
}
.breakout-1200 {
  width: min(1200px, calc(100vw - 2rem));
}
.breakout-1250 {
  width: min(1250px, calc(100vw - 2rem));
}
.breakout-1300 {
  width: min(1300px, calc(100vw - 2rem));
}
.breakout-1350 {
  width: min(1350px, calc(100vw - 2rem));
}
.breakout-1400 {
  width: min(1400px, calc(100vw - 2rem));
}

.breakout-1450 {
  width: min(1450px, calc(100vw - 2rem));
}

.breakout-1500 {
  width: min(1500px, calc(100vw - 2rem));
}

.breakout-1550 {
  width: min(1550px, calc(100vw - 2rem));
}

.breakout-1600 {
  width: min(1600px, calc(100vw - 2rem));
}

.breakout-1650 {
  width: min(1650px, calc(100vw - 2rem));
}

.breakout-1700 {
  width: min(1700px, calc(100vw - 2rem));
}


.breakout-full {
  width: calc(100vw - 2rem);
}


/* Small bleed beyond container */
.bleed {
  width: min(calc(100% + 4rem), calc(100vw - 2rem));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  max-width: none !important;
  height: auto;
  margin-top: var(--img-mt, 1.5rem);
  margin-bottom: var(--img-mb, 1.5rem);
}

/*How to use

Standard: <img class="breakout-1200" src="..." alt="">

Full-width: <img class="breakout-full" src="..." alt="">

<img 
  class="breakout-1200" 
  src="..." 
  style="--img-mt: 0.5rem; --img-mb: 0.75rem;"
>

*/