////
///
/// Frame
/// ===========================================================================
///
/// Aspect ratio frame (geometry only).
/// Pure spatial logic. No colors. No shadows.
///
/// @group Flow
/// @author Scape Press
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

@layer ss.flow {
    .ss-f-frame {
        aspect-ratio: var(--ss-f-frame-ratio, 16 / 9);
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

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

    // Frame ratio variants
    .ss-f-frame-square {
        --ss-f-frame-ratio: 1 / 1;
    }
    .ss-f-frame-video {
        --ss-f-frame-ratio: 16 / 9;
    }
    .ss-f-frame-cinema {
        --ss-f-frame-ratio: 21 / 9;
    }
    .ss-f-frame-portrait {
        --ss-f-frame-ratio: 3 / 4;
    }
    .ss-f-frame-landscape {
        --ss-f-frame-ratio: 4 / 3;
    }
    .ss-f-frame-golden {
        --ss-f-frame-ratio: 1.618 / 1;
    }
}