/**
 * Walleboom.Optimizely.ResponsiveImages - Responsive Image Styles
 * 
 * Atomic utility classes for responsive images with breakpoint-prefixed aspect ratios.
 * Uses mobile-first approach: base classes apply to all widths, prefixed classes override.
 * 
 * Breakpoint prefixes:
 *   (none) = Mobile first / all sizes (0px+)
 *   md:    = Tablet and up (768px+)
 *   lg:    = Desktop and up (1366px+)
 * 
 * Usage:
 *   <link rel="stylesheet" href="/responsive-images/styles.css" />
 *   <img class="ar-4-3 md:ar-16-9 lg:ar-2-1" />
 */

/* ==========================================================================
   Base Container Styles
   ========================================================================== */

.responsive-image {
    display: block;
    position: relative;
    overflow: hidden;
}

.responsive-image img {
    display: block;
    height: auto;
}

/* ==========================================================================
   Aspect Ratio Utilities - Base (Mobile-First, 0px+)
   ========================================================================== */

.ar-1-1 { aspect-ratio: 1 / 1; }
.ar-4-3 { aspect-ratio: 4 / 3; }
.ar-3-2 { aspect-ratio: 3 / 2; }
.ar-16-10 { aspect-ratio: 16 / 10; }
.ar-16-9 { aspect-ratio: 16 / 9; }
.ar-2-1 { aspect-ratio: 2 / 1; }
.ar-21-9 { aspect-ratio: 21 / 9; }
.ar-3-4 { aspect-ratio: 3 / 4; }
.ar-9-16 { aspect-ratio: 9 / 16; }
.ar-auto { aspect-ratio: auto; }

/* ==========================================================================
   Aspect Ratio Utilities - Tablet (md: 768px+)
   ========================================================================== */

@media (min-width: 768px) {
    .md\:ar-1-1 { aspect-ratio: 1 / 1; }
    .md\:ar-4-3 { aspect-ratio: 4 / 3; }
    .md\:ar-3-2 { aspect-ratio: 3 / 2; }
    .md\:ar-16-10 { aspect-ratio: 16 / 10; }
    .md\:ar-16-9 { aspect-ratio: 16 / 9; }
    .md\:ar-2-1 { aspect-ratio: 2 / 1; }
    .md\:ar-21-9 { aspect-ratio: 21 / 9; }
    .md\:ar-3-4 { aspect-ratio: 3 / 4; }
    .md\:ar-9-16 { aspect-ratio: 9 / 16; }
    .md\:ar-auto { aspect-ratio: auto; }
}

/* ==========================================================================
   Aspect Ratio Utilities - Desktop (lg: 1366px+)
   ========================================================================== */

@media (min-width: 1366px) {
    .lg\:ar-1-1 { aspect-ratio: 1 / 1; }
    .lg\:ar-4-3 { aspect-ratio: 4 / 3; }
    .lg\:ar-3-2 { aspect-ratio: 3 / 2; }
    .lg\:ar-16-10 { aspect-ratio: 16 / 10; }
    .lg\:ar-16-9 { aspect-ratio: 16 / 9; }
    .lg\:ar-2-1 { aspect-ratio: 2 / 1; }
    .lg\:ar-21-9 { aspect-ratio: 21 / 9; }
    .lg\:ar-3-4 { aspect-ratio: 3 / 4; }
    .lg\:ar-9-16 { aspect-ratio: 9 / 16; }
    .lg\:ar-auto { aspect-ratio: auto; }
}

/* ==========================================================================
   Object Fit Utilities
   ========================================================================== */

.object-cover img { object-fit: cover; }
.object-contain img { object-fit: contain; }
.object-fill img { object-fit: fill; }
.object-none img { object-fit: none; }