$background-color-list: #A6206A, #EC1C4B, #F16A43, #f1c939, #299e7b, #1a7e80, #1a6e8f, #085297, #1c2d77;

.gridbody {
    display: block;
    padding: $padding-div;
    background-color: #fafafa;
    //Titulos
    h2 {
        @include h2-style;
        font-size: 2rem;
        margin: 1em 0;
    }
    h4 {
        margin: 0 0 1rem 0;
        font-family: 'Montserrat', sans-serif;
        font-weight: 300;
    }
    h5 {
        margin: 0 0 1rem 0;
        font-family: 'Montserrat', sans-serif;
        font-weight: 800;
        text-transform: uppercase;
    }


    .grid-examples{
        display: flex;
        flex-flow: row wrap; 
        margin-bottom: 4rem;   
        .grid-example {
            display: block;
            width: 400px;
            height: 300px;
            margin-right: 1rem;
            @each $bg-color in $background-color-list {
                $i: index($background-color-list , $bg-color);
                .area-#{$i} {
                    background-color: $bg-color;
                    color: #fff;
                    //height: 3rem;
                    width: auto;
                    font: 600 .875rem 'montserrat';
                    text-transform: uppercase;
                    //display: flex;
                    //align-items: center;
                    //justify-content: center;                     
                }
            }         
            .full {
                width: 100%;
                height: 100%;
            }
            .grid-template-columns-px {
                display: grid;
                grid-template-columns: 33.33% 33.33% 33.33%;
                grid-template-rows: 100px 100px 100px;
            }
            .grid-template-columns-fr {
                display: grid;
                grid-template-columns: 1fr 4fr 1fr;
                grid-template-rows: 1fr 3fr 2fr;
            }
            .grid-template-columns-fr-gap {
                display: grid;
                grid-template-columns: 1fr 4fr 1fr;
                grid-template-rows: 1fr 3fr 2fr;
                grid-gap: 16px;  
            }
            .grid-template-columns-minmax {
                display: grid;
                // rellena el contenedor con todas las columnas que permita
                // con ancho mínimo de 20% y máximo de una fracción
                grid-template-columns: repeat(auto-fill, minmax(25%, 1fr)); 
                // rellena el contenendor con columnas de mínimo 20px de altura
                // y máximo una fracción 
                grid-auto-rows: minmax(20px, 1fr);
                grid-gap: 8px;  
            }
            .grid-template-start-end {
                display: grid;           
                grid-gap: 20px;
                .area-1 {
                    grid-column: 1 / 3;
                    grid-row: 1;
                }        
                .area-2 {
                    grid-column: 2;
                    grid-row: 2;
                }             
                .area-3 {
                    grid-column: 1;
                    grid-row: 2;
                }        
                .area-4 {
                    grid-column: 1 / 3;
                    grid-row: 3;
                }
                .area-5 {
                    grid-column: 1 / 2;
                    grid-row: 4 / 6;
                }        
                .area-6 {
                    grid-column: 2 / 3;
                    grid-row: 4 / 5;
                }   
                .area-7 {
                    grid-column: 2 / 3;
                    grid-row: 5 / 7;
                    z-index: 1;
                }
                .area-8 {
                    grid-column: 1 / 3;
                    grid-row: 6 / 6;
                }
                .area-9 {
                    grid-column: 1 / 3;
                    grid-row: 7 / 7;
                }                         
            }       
            .grid-template-areas {
                display: grid;
                grid-template-areas: 
                    "header header"
                    "sidebar content"
                    "footer footer";
                grid-template-columns: 1fr 3fr;
                grid-gap: 10px;
                .area-1 {
                    grid-area: header;
                }        
                .area-2 {
                    grid-area: content;
                }             
                .area-3 {
                    grid-area: sidebar;
                }        
                .area-4 {
                    grid-area: footer;
                }            
            }           
        }
    }
}