/**
 * FRAME PRIMITIVE
 * Based on Every Layout's Frame
 * Creates aspect-ratio containers with centered/cropped content
 *
 * Features:
 * - Configurable aspect ratio using CSS variables (--n and --d)
 * - Centers content using Flexbox (justify-content/align-items)
 * - Crops media using object-fit: cover
 * - Works with images, videos, and any HTML content
 * - Logical properties for internationalization
 *
 * Usage:
 * .frame - Default 16:9 aspect ratio
 * .frame[data-frame="square"] - 1:1 square
 * .frame[data-frame="photo"] - 4:3 photo
 *
 * Example:
 * <div class="frame" style="--n: 16; --d: 9">
 *   <img src="image.jpg" alt="">
 * </div>
 */

.frame {
  --n: 16;
  --d: 9;
  aspect-ratio: var(--n) / var(--d);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.frame > img,
.frame > video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* ========================================
   DATA ATTRIBUTE VARIANTS
   Aspect ratio configurations
   ======================================== */

/* Common aspect ratio presets */
.frame[data-frame="square"] {
  --n: 1;
  --d: 1;
}

.frame[data-frame="video"] {
  --n: 16;
  --d: 9;
}

.frame[data-frame="photo"] {
  --n: 4;
  --d: 3;
}

.frame[data-frame="cinema"] {
  --n: 21;
  --d: 9;
}

.frame[data-frame="portrait"] {
  --n: 3;
  --d: 4;
}

.frame[data-frame="ultra"] {
  --n: 21;
  --d: 9;
}