// Anything above
body
{

    margin: 0px;
    padding: 0px;

    display: grid;

    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;

    grid-gap: 32px;

    width: 100%;
}

header
{
    min-height: 80px;

    background-color: green;

}

main
{
    min-height: 800px;
    background-color: green;


}

footer
{
    min-height: 200px;

    background-color: green;

}
// Desktop
@media screen and (max-width: 1280px)
{
    header
    {
        background-color: orange;

    }

    main
    {
        background-color: orange;


    }

    footer
    {
        background-color: orange;

    }

}

@media screen and (max-width: 1024px)
{
    header
    {
        background-color: yellow;

    }

    main
    {
        background-color: yellow;


    }

    footer
    {
        background-color: yellow;

    }

}

@media screen and (max-width: 768px)
{
    header
    {
        background-color: red;

    }

    main
    {
        background-color: red;


    }

    footer
    {
        background-color: red;

    }

}


// Mobile
@media screen and (max-width: 600px)
{
    header
    {
        background-color: blue;

    }

    main
    {
        background-color: blue;


    }

    footer
    {
        background-color: blue;

    }
}