////
///
/// Grid Span Mixins
/// ===========================================================================
///
/// CSS Grid span mixins for controlling item sizing across tracks.
///
/// @group Mixins.HeadLayout.Grid
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

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

// ============================================================================
// Grid Column Span
// ============================================================================

/// Mixin for grid column span at different breakpoints
/// @param {Number} $val - The number of columns to span
@mixin grid--span--col($val) {
    grid-column: span $val;
}

/// Mixin for small screen grid column span
/// @param {Number} $val - The number of columns to span on small screens
@mixin grid--span--col--sm($val) {
    @media (max-width: $media_sm) {
        grid-column: span $val;
    }
}

/// Mixin for medium screen grid column span
/// @param {Number} $val - The number of columns to span on medium screens
@mixin grid--span--col--md($val) {
    @media (max-width: $media_md) {
        grid-column: span $val;
    }
}

/// Mixin for large screen grid column span
/// @param {Number} $val - The number of columns to span on large screens
@mixin grid--span--col--lg($val) {
    @media (max-width: $media_lg) {
        grid-column: span $val;
    }
}

// ============================================================================
// Grid Row Span
// ============================================================================

/// Mixin for grid row span at different breakpoints
/// @param {Number} $val - The number of rows to span
@mixin grid--span--row($val) {
    grid-row: span $val;
}

/// Mixin for small screen grid row span
/// @param {Number} $val - The number of rows to span on small screens
@mixin grid--span--row--sm($val) {
    @media (max-width: $media_sm) {
        grid-row: span $val;
    }
}

/// Mixin for medium screen grid row span
/// @param {Number} $val - The number of rows to span on medium screens
@mixin grid--span--row--md($val) {
    @media (max-width: $media_md) {
        grid-row: span $val;
    }
}

/// Mixin for large screen grid row span
/// @param {Number} $val - The number of rows to span on large screens
@mixin grid--span--row--lg($val) {
    @media (max-width: $media_lg) {
        grid-row: span $val;
    }
}