/* ========== Aspect Ratio Helpers ========== */
/* Generic container */
.aspect-ratio {
  width: 100%;
  overflow: hidden;
}
.aspect-ratio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Squares --- */
.ratio-1-1 {
  aspect-ratio: 1 / 1;   /* perfect square */
}

/* --- Landscape Ratios --- */
.ratio-16-9 {
  aspect-ratio: 16 / 9;  /* widescreen */
}
.ratio-4-3 {
  aspect-ratio: 4 / 3;   /* photo format */
}
.ratio-3-2 {
  aspect-ratio: 3 / 2;   /* DSLR standard */
}
.ratio-21-9 {
  aspect-ratio: 21 / 9;  /* ultra-wide cinematic */
}

/* --- Portrait Ratios --- */
.ratio-3-4 {
  aspect-ratio: 3 / 4;
}
.ratio-2-3 {
  aspect-ratio: 2 / 3;   /* phone portrait */
}
.ratio-9-16 {
  aspect-ratio: 9 / 16;  /* TikTok/Reels/Stories */
}

/* --- Golden Ratio --- */
.ratio-golden {
  aspect-ratio: 1.618 / 1; /* golden rectangle */
}