$layout-positions: static, relative, absolute, fixed, sticky;
$layout-displays: none, block, flex, inline, inline-block;

// Iterate over each position property in the $layout-positions
@each $val in $layout-positions {
    // Create classes for each CSS positioning property
    .#{$val} {
        position: $val !important;
    }

    // Iterate over each bp_key-bp_val mapping pair in the $breakpoints
    @each $bp_key, $bp_val in $breakpoints {
        @media (min-width: $bp_val) {
            // Generate classes for each breakpoint
            .#{$bp_key}\:#{$val} {
                postion: $val !important;
            }
        }
    }
}


// Iterate over each display property in the $layout-displays
@each $val in $layout-displays {
    // Create classes for each CSS display property

    // Check if the display value is none
    @if ($val == none) {
        .hidden {
            display: none !important;
        }
    } @else {
        .#{$val} {
            display: $val !important;
        }
    }


    // Iterate over each bp_key-bp_val mapping pair in the $breakpoints
    @each $bp_key, $bp_val in $breakpoints {
        @media (min-width: $bp_val) {
            // Generate classes for each breakpoint

            // Check if the display value is none
            @if ($val == none) {
                .#{$bp_key}\:hidden {
                    display: none !important;
                }
            } @else {
                .#{$bp_key}\:#{$val} {
                    display: $val !important;
                }
            }
        }
    }
}