/*
================================================================================
  FROOTS REVAMPED IMAGES
  froots-revamped-images.css

  Version history:
  v1.0  2026  Initial revamped version
              - Fixed double comment opener at top
              - Removed duplicate clearfix (defined in core)
              - Removed img-responsive (moved to core — used universally)
              - No other changes — logic was clean
              - Load after froots-revamped-core.css
================================================================================
*/

/* ── Centered image ──────────────────────────────────────────────────────────── */
.img-center {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ── Floating images with text flow ─────────────────────────────────────────── */
.img-float-left {
  float: left;
  margin: 0 1.5rem 1rem 0;
  max-width: 50%;
}

.img-float-right {
  float: right;
  margin: 0 0 1rem 1.5rem;
  max-width: 50%;
}

.img-float-left img,
.img-float-right img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--border-radius, 4px);
}

/* ── Aspect ratio containers ─────────────────────────────────────────────────── */
.img-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius, 4px);
}

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-4-3  { aspect-ratio: 4 / 3; }
.aspect-1-1  { aspect-ratio: 1 / 1; }

/* ── Mobile ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .img-float-left,
  .img-float-right {
    float: none;
    margin: 0 auto 1rem auto;
    max-width: 100%;
    display: block;
  }
}