////
///
/// Aspect Ratio Utilities
/// ===========================================================================
///
/// Maintain consistent aspect ratios on responsive elements.
///
/// @group Utilities.Media
/// @author Scape Press
/// @link https://scape.style
/// @since 0.3.0
/// @access public
///
////

@layer ss.utilities {
    .ss-u-ratio {
        position: relative;
        width: 100%;

        > * {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }
    }

    .ss-u-ratio-1x1 {
        aspect-ratio: 1 / 1;
    }
    .ss-u-ratio-4x3 {
        aspect-ratio: 4 / 3;
    }
    .ss-u-ratio-16x9 {
        aspect-ratio: 16 / 9;
    }
    .ss-u-ratio-21x9 {
        aspect-ratio: 21 / 9;
    }
}