@charset "UTF-8";

/*
    TYPICAL DEVICE BREAKPOINTS 
    (Font: W3C 2025)

    Extra small devices
    (phones)
    (--- and 600px) 

    Small devices
    (portrait tablets and large phones)
    (600px and ---)

    Medium devices
    (landscape tablets)
    (768px and ---)

    Large devices
    (laptops/desktops)
    (992px and ---)

    Extra large devices
    (large laptops and desktops)
    (1200px and ---)
*/

@media screen and (min-width: 768px) {

    /* Layout */

    .container {
        display: grid;
        grid-template: repeat(6, max-content)/ 20px 2fr 1fr 20px;
    }

    .main {
        grid-area: 3 / 2 / span 2 / 3 ;
    }

    .aside1 {
        display: block;
        grid-area: 3 / 3 / 4 / -2;
    }

    .aside2 {
        display: block;
        grid-area: 4 / 3 / span 1 / -2;
    }

    .devs {
        grid-area: 5 / 1 / -2 / -1;
    }

    .footer {
        grid-area: -2 / 1 / -1 / -1;
    }

    /* Style Group*/


    /* Code Flow */

    aside.devs > div.devs-flex {
        flex-flow: row wrap;
}
    
}

@media screen and (min-width:1100px) {
    
    /* Layout */

    .container {
        display: grid;
        grid-template: repeat(5, max-content) / 30px 1fr minmax(auto, 1200px) 1fr 30px;
    }

    .main {
        grid-area: 3 / 3 / 4 / 4;
    }

    .aside1 {
        grid-area: 3 / 2 / 4 / 3;
    }

    .aside2 {
        grid-area: 3 / -3 / 4 / -2;
    }

    .devs {
        grid-area: 4 / 1 / 5 / -1;
    }

    .footer {
        grid-area: -2 / 1 / -1 / -1;
    }
}