/**
 * Utility: Grid Utility Classes
 *
 * Use this only with the Core/Group block "Grid" variation.
 */



/*------ Display ------*/

body:is(.editor-styles-wrapper, *) .wp-block-group.is-grid-container,
body:is(.editor-styles-wrapper, *) .wp-block-post-template.is-grid-container {
    display: grid;
}


/*------ Grid Template Columns ------*/

body:is(.editor-styles-wrapper, *) .is-grid-container.col-1 {
    grid-template-columns: 1fr;
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-2 {
    grid-template-columns: 1fr 1fr;
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-4 {
    grid-template-columns: repeat(4, 1fr);
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-5 {
    grid-template-columns: repeat(5, 1fr);
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-6 {
    grid-template-columns: repeat(6, 1fr);
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-7 {
    grid-template-columns: repeat(7, 1fr);
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-8 {
    grid-template-columns: repeat(8, 1fr);
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-9 {
    grid-template-columns: repeat(9, 1fr);
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-10 {
    grid-template-columns: repeat(10, 1fr);
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-11 {
    grid-template-columns: repeat(11, 1fr);
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-12 {
    grid-template-columns: repeat(12, 1fr);
}


/*------ Grid Template Columns (minmax - autofit) ------*/

body:is(.editor-styles-wrapper, *) .is-grid-container.col-autofit-160 {
    grid-template-columns: repeat( auto-fit, minmax( min( 10rem, 100% ), 1fr ) );
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-autofit-240 {
    grid-template-columns: repeat( auto-fit, minmax( min( 15rem, 100% ), 1fr ) );
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-autofit-280 {
    grid-template-columns: repeat( auto-fit, minmax( min( 17.5rem, 100% ), 1fr ) );
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-autofit-320 {
    grid-template-columns: repeat( auto-fit, minmax( min( 20rem, 100% ), 1fr ) );
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-autofit-360 {
    grid-template-columns: repeat( auto-fit, minmax( min( 22.5rem, 100% ), 1fr ) );
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-autofit-400 {
    grid-template-columns: repeat( auto-fit, minmax( min( 25rem, 100% ), 1fr ) );
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-autofit-480 {
    grid-template-columns: repeat( auto-fit, minmax( min( 30rem, 100% ), 1fr ) );
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-autofit-560 {
    grid-template-columns: repeat( auto-fit, minmax( min( 35rem, 100% ), 1fr ) );
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-autofit-640 {
    grid-template-columns: repeat( auto-fit, minmax( min( 40rem, 100% ), 1fr ) );
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-autofit-720 {
    grid-template-columns: repeat( auto-fit, minmax( min( 45rem, 100% ), 1fr ) );
}


/*------ Grid Template Columns (minmax - autofill) ------*/

body:is(.editor-styles-wrapper, *) .is-grid-container.col-autofill-160 {
    grid-template-columns: repeat( auto-fill, minmax( min( 10rem, 100% ), 1fr ) );
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-autofill-240 {
    grid-template-columns: repeat( auto-fill, minmax( min( 15rem, 100% ), 1fr ) );
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-autofill-280 {
    grid-template-columns: repeat( auto-fill, minmax( min( 17.5rem, 100% ), 1fr ) );
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-autofill-320 {
    grid-template-columns: repeat( auto-fill, minmax( min( 20rem, 100% ), 1fr ) );
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-autofill-360 {
    grid-template-columns: repeat( auto-fill, minmax( min( 22.5rem, 100% ), 1fr ) );
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-autofill-400 {
    grid-template-columns: repeat( auto-fill, minmax( min( 25rem, 100% ), 1fr ) );
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-autofill-480 {
    grid-template-columns: repeat( auto-fill, minmax( min( 30rem, 100% ), 1fr ) );
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-autofill-560 {
    grid-template-columns: repeat( auto-fill, minmax( min( 35rem, 100% ), 1fr ) );
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-autofill-640 {
    grid-template-columns: repeat( auto-fill, minmax( min( 40rem, 100% ), 1fr ) );
}

body:is(.editor-styles-wrapper, *) .is-grid-container.col-autofill-720 {
    grid-template-columns: repeat( auto-fill, minmax( min( 45rem, 100% ), 1fr ) );
}


/*------ Justify Items ------*/

body:is(.editor-styles-wrapper, *) .is-grid-container.justify-items-start {
    justify-items: start;
}

body:is(.editor-styles-wrapper, *) .is-grid-container.justify-items-end {
    justify-items: end;
}

body:is(.editor-styles-wrapper, *) .is-grid-container.justify-items-center {
    justify-items: center;
}

body:is(.editor-styles-wrapper, *) .is-grid-container.justify-items-stretch {
    justify-items: stretch;
}


/*------ Align Items ------*/

body:is(.editor-styles-wrapper, *) .is-grid-container.align-items-start {
    align-items: start;
}

body:is(.editor-styles-wrapper, *) .is-grid-container.align-items-end {
    align-items: end;
}

body:is(.editor-styles-wrapper, *) .is-grid-container.align-items-center {
    align-items: center;
}

body:is(.editor-styles-wrapper, *) .is-grid-container.align-items-stretch {
    align-items: stretch;
}


/*------ Justify Self ------*/

body:is(.editor-styles-wrapper, *) .is-grid-container .justify-self-start {
    justify-self: start;
}

body:is(.editor-styles-wrapper, *) .is-grid-container .justify-self-end {
    justify-self: end;
}

body:is(.editor-styles-wrapper, *) .is-grid-container .justify-self-center {
    justify-self: center;
}

body:is(.editor-styles-wrapper, *) .is-grid-container .justify-self-stretch {
    justify-self: stretch;
}


/*------ Align Self ------*/

body:is(.editor-styles-wrapper, *) .is-grid-container .align-self-start {
    align-self: start;
}

body:is(.editor-styles-wrapper, *) .is-grid-container .align-self-end {
    align-self: end;
}

body:is(.editor-styles-wrapper, *) .is-grid-container .align-self-center {
    align-self: center;
}

body:is(.editor-styles-wrapper, *) .is-grid-container .align-self-stretch {
    align-self: stretch;
}


/*------ SMALL VIEWPORT ------*/

@media(min-width: 640px) {

    /*------ Display ------*/

    body:is(.editor-styles-wrapper, *) .wp-block-group.sm-is-grid-container,
    body:is(.editor-styles-wrapper, *) .wp-block-post-template.sm-is-grid-container {
        display: grid;
    }


    /*------ Grid Template Columns ------*/

    body:is(.editor-styles-wrapper, *) .is-grid-container.sm-col-1 {
        grid-template-columns: 1fr;
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.sm-col-2 {
        grid-template-columns: 1fr 1fr;
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.sm-col-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.sm-col-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.sm-col-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.sm-col-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.sm-col-7 {
        grid-template-columns: repeat(7, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.sm-col-8 {
        grid-template-columns: repeat(8, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.sm-col-9 {
        grid-template-columns: repeat(9, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.sm-col-10 {
        grid-template-columns: repeat(10, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.sm-col-11 {
        grid-template-columns: repeat(11, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.sm-col-12 {
        grid-template-columns: repeat(12, 1fr);
    }


    /*------ Justify Items ------*/

    body:is(.editor-styles-wrapper, *) .is-grid-container.sm-justify-items-start {
        justify-items: start;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container.sm-justify-items-end {
        justify-items: end;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container.sm-justify-items-center {
        justify-items: center;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container.sm-justify-items-stretch {
        justify-items: stretch;
    }


    /*------ Align Items ------*/

    body:is(.editor-styles-wrapper, *) .is-grid-container.sm-align-items-start {
        align-items: start;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container.sm-align-items-end {
        align-items: end;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container.sm-align-items-center {
        align-items: center;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container.sm-align-items-stretch {
        align-items: stretch;
    }


    /*------ Justify Self ------*/

    body:is(.editor-styles-wrapper, *) .is-grid-container .sm-justify-self-start {
        justify-self: start;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container .sm-justify-self-end {
        justify-self: end;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container .sm-justify-self-center {
        justify-self: center;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container .sm-justify-self-stretch {
        justify-self: stretch;
    }


    /*------ Align Self ------*/

    body:is(.editor-styles-wrapper, *) .is-grid-container .sm-align-self-start {
        align-self: start;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container .sm-align-self-end {
        align-self: end;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container .sm-align-self-center {
        align-self: center;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container .sm-align-self-stretch {
        align-self: stretch;
    }
}


/*------ MEDIUM VIEWPORT ------*/

@media(min-width: 768px) {

    /*------ Display ------*/

    body:is(.editor-styles-wrapper, *) .wp-block-group.md-is-grid-container,
    body:is(.editor-styles-wrapper, *) .wp-block-post-template.md-is-grid-container {
        display: grid;
    }


    /*------ Grid Template Columns ------*/

    body:is(.editor-styles-wrapper, *) .is-grid-container.md-col-1 {
        grid-template-columns: 1fr;
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.md-col-2 {
        grid-template-columns: 1fr 1fr;
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.md-col-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.md-col-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.md-col-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.md-col-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.md-col-7 {
        grid-template-columns: repeat(7, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.md-col-8 {
        grid-template-columns: repeat(8, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.md-col-9 {
        grid-template-columns: repeat(9, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.md-col-10 {
        grid-template-columns: repeat(10, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.md-col-11 {
        grid-template-columns: repeat(11, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.md-col-12 {
        grid-template-columns: repeat(12, 1fr);
    }


    /*------ Justify Items ------*/

    body:is(.editor-styles-wrapper, *) .is-grid-container.md-justify-items-start {
        justify-items: start;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container.md-justify-items-end {
        justify-items: end;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container.md-justify-items-center {
        justify-items: center;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container.md-justify-items-stretch {
        justify-items: stretch;
    }


    /*------ Align Items ------*/

    body:is(.editor-styles-wrapper, *) .is-grid-container.md-align-items-start {
        align-items: start;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container.md-align-items-end {
        align-items: end;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container.md-align-items-center {
        align-items: center;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container.md-align-items-stretch {
        align-items: stretch;
    }


    /*------ Justify Self ------*/

    body:is(.editor-styles-wrapper, *) .is-grid-container .md-justify-self-start {
        justify-self: start;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container .md-justify-self-end {
        justify-self: end;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container .md-justify-self-center {
        justify-self: center;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container .md-justify-self-stretch {
        justify-self: stretch;
    }


    /*------ Align Self ------*/

    body:is(.editor-styles-wrapper, *) .is-grid-container .md-align-self-start {
        align-self: start;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container .md-align-self-end {
        align-self: end;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container .md-align-self-center {
        align-self: center;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container .md-align-self-stretch {
        align-self: stretch;
    }
}


/*------ LARGE VIEWPORT ------*/

@media(min-width: 1024px) {

    /*------ Display ------*/

    body:is(.editor-styles-wrapper, *) .wp-block-group.lg-is-grid-container,
    body:is(.editor-styles-wrapper, *) .wp-block-post-template.lg-is-grid-container {
        display: grid;
    }


    /*------ Grid Template Columns ------*/

    body:is(.editor-styles-wrapper, *) .is-grid-container.lg-col-1 {
        grid-template-columns: 1fr;
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.lg-col-2 {
        grid-template-columns: 1fr 1fr;
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.lg-col-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.lg-col-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.lg-col-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.lg-col-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.lg-col-7 {
        grid-template-columns: repeat(7, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.lg-col-8 {
        grid-template-columns: repeat(8, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.lg-col-9 {
        grid-template-columns: repeat(9, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.lg-col-10 {
        grid-template-columns: repeat(10, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.lg-col-11 {
        grid-template-columns: repeat(11, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.lg-col-12 {
        grid-template-columns: repeat(12, 1fr);
    }


    /*------ Justify Items ------*/

    body:is(.editor-styles-wrapper, *) .is-grid-container.lg-justify-items-start {
        justify-items: start;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container.lg-justify-items-end {
        justify-items: end;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container.lg-justify-items-center {
        justify-items: center;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container.lg-justify-items-stretch {
        justify-items: stretch;
    }


    /*------ Align Items ------*/

    body:is(.editor-styles-wrapper, *) .is-grid-container.lg-align-items-start {
        align-items: start;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container.lg-align-items-end {
        align-items: end;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container.lg-align-items-center {
        align-items: center;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container.lg-align-items-stretch {
        align-items: stretch;
    }


    /*------ Justify Self ------*/

    body:is(.editor-styles-wrapper, *) .is-grid-container .lg-justify-self-start {
        justify-self: start;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container .lg-justify-self-end {
        justify-self: end;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container .lg-justify-self-center {
        justify-self: center;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container .lg-justify-self-stretch {
        justify-self: stretch;
    }


    /*------ Align Self ------*/

    body:is(.editor-styles-wrapper, *) .is-grid-container .lg-align-self-start {
        align-self: start;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container .lg-align-self-end {
        align-self: end;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container .lg-align-self-center {
        align-self: center;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container .lg-align-self-stretch {
        align-self: stretch;
    }
}


/*------ Extra Large Viewport ------*/

@media(min-width: 1280px) {

    /*------ Display ------*/

    body:is(.editor-styles-wrapper, *) .wp-block-group.xl-is-grid-container,
    body:is(.editor-styles-wrapper, *) .wp-block-post-template.xl-is-grid-container {
        display: grid;
    }


    /*------ Grid Template Columns ------*/

    body:is(.editor-styles-wrapper, *) .is-grid-container.xl-col-1 {
        grid-template-columns: 1fr;
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.xl-col-2 {
        grid-template-columns: 1fr 1fr;
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.xl-col-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.xl-col-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.xl-col-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.xl-col-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.xl-col-7 {
        grid-template-columns: repeat(7, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.xl-col-8 {
        grid-template-columns: repeat(8, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.xl-col-9 {
        grid-template-columns: repeat(9, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.xl-col-10 {
        grid-template-columns: repeat(10, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.xl-col-11 {
        grid-template-columns: repeat(11, 1fr);
    }
    
    body:is(.editor-styles-wrapper, *) .is-grid-container.xl-col-12 {
        grid-template-columns: repeat(12, 1fr);
    }


    /*------ Justify Items ------*/

    body:is(.editor-styles-wrapper, *) .is-grid-container.xl-justify-items-start {
        justify-items: start;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container.xl-justify-items-end {
        justify-items: end;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container.xl-justify-items-center {
        justify-items: center;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container.xl-justify-items-stretch {
        justify-items: stretch;
    }


    /*------ Align Items ------*/

    body:is(.editor-styles-wrapper, *) .is-grid-container.xl-align-items-start {
        align-items: start;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container.xl-align-items-end {
        align-items: end;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container.xl-align-items-center {
        align-items: center;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container.xl-align-items-stretch {
        align-items: stretch;
    }


    /*------ Justify Self ------*/

    body:is(.editor-styles-wrapper, *) .is-grid-container .xl-justify-self-start {
        justify-self: start;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container .xl-justify-self-end {
        justify-self: end;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container .xl-justify-self-center {
        justify-self: center;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container .xl-justify-self-stretch {
        justify-self: stretch;
    }


    /*------ Align Self ------*/

    body:is(.editor-styles-wrapper, *) .is-grid-container .xl-align-self-start {
        align-self: start;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container .xl-align-self-end {
        align-self: end;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container .xl-align-self-center {
        align-self: center;
    }

    body:is(.editor-styles-wrapper, *) .is-grid-container .xl-align-self-stretch {
        align-self: stretch;
    }
}