/*******************************************************************************************************/
/*
/* This script will use the correct @Media Device Breakpoints for the LEAGUES screen, excluding anything
/* to do with the .top_row, which is taken care off by 'breakpoints_home_header'.
/*
/*  Every time a new block (i.e. block1 block 2 etc) is added to the parent page (i.e. home, leagues etc)
/*  you must add a new line to the 'grid-template-areas' line, AND add 1 to the repeat part of the
/*  'grid-template-rows' line (i.e. repeat(3, auto) will become repeat(4, auto).
/*
/*******************************************************************************************************/

@media only screen {
    /* DEFAULT Setting */

    .whole_page {
        min-height: 100vh;
        display: grid;
        grid-template-columns: 5fr 1fr 7fr 1fr 5fr;
        grid-template-rows: repeat(3, auto) 1fr auto;
        grid-template-areas:
                "top_row top_row top_row top_row top_row"
                "navbar navbar navbar navbar navbar"
                ". block_1 block_1 block_1 ."
                ". block_2 block_2 block_2 ."
                ". footer footer footer .";
    }

    /* Screen Drag 2480 -  */
    @media only screen and (max-width: 2480px) {
        .whole_page {
            display: grid;
            grid-template-columns: 3fr 1fr 7fr 1fr 3fr;
        }
    }

    /* Screen Drag 1800 -  */
    @media only screen and (max-width: 1800px) {
        .whole_page {
            display: grid;
            grid-template-columns: 1fr 1fr 7fr 1fr 1fr;
        }
    }

    /* Screen Drag 1480 -  */
    @media only screen and (max-width: 1480px) {
        .whole_page {
            display: grid;
            grid-template-columns: 1fr 1fr 7fr 1fr 1fr;
        }
    }


    /* Screen Drag 800 */
    @media only screen and (max-width: 800px) {
        .whole_page {
            display: grid;
            grid-template-columns: 0.5fr 1fr 7fr 1fr 0.5fr;
        }
    }

    /* Screen Drag 600 */
    @media only screen and (max-width: 600px) {
        .whole_page {
            display: grid;
            grid-template-columns: 0.5fr 1fr 7fr 1fr 0.5fr;
        }
    }

    /* Screen Drag 450 - A sneaky way of not displaying the LOGO, but also to maintain the integrity of the display. */
    @media only screen and (max-width: 450px) {
        .whole_page {
            display: grid;
            grid-template-columns: 0.5fr 1fr 5fr 1fr 0.5fr;
        }
    }

    /* Screen Drag 350 - Dinosaur Devices */
    @media only screen and (max-width: 350px) {
        .whole_page {
            display: grid;
            grid-template-columns: 0.25fr 1fr 5fr 1fr 0.25fr;
        }
    }
}