@use "../../dev" as *;

@use "../head_layout" as *;
@use "frame_base" as *;
@use "../soul_object" as *;

// ============================================================================
// Layout | Grid 3x3 Fullscreen Centered
// ============================================================================

/// @mixin frame_center
/// Sets up a full-viewport 3x3 CSS grid with centered content areas.
@mixin frame_center {
    @include frame_base;

    // display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr auto 1fr;
    // width: 100vw;
    // height: 100vh;
    // gap: 0;
    grid-template-areas:
        "top_left      top_center       top_right"
        "middle_left   middle_center    middle_right"
        "bottom_left   bottom_center    bottom_right";

    > * {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/// @mixin grid--center-content
/// Utility for the `.grid--center` slot
@mixin frame_center__area {
    max-width: 100%;
    max-height: 100%;
    // padding: 1rem;
    box-sizing: border-box;
}