.Grid_A{grid-area: A;}

.Grid_B{grid-area: B;}

.Grid_C{grid-area: C;}

.Grid_D{grid-area: D;}

.Grid_E{grid-area: E;}

.GC_Index
{
    display: grid;

    grid-template-areas: 
    ". A"
    "B ."
    ". C";

    grid-template-columns: 40% 40%;

    gap: 5%;

    justify-content: space-evenly;
}

Body > .H-div-Tracks
{
    align-items: stretch;
    
    gap: 10%;

    margin-left: 10%;
    margin-right: 10%;
}



.GC_DashBoard
{

    display: grid;

    grid-template-areas:
    "A B C";

    gap: 5%;

    margin-left: 2%;
    margin-right: 2%;
}

.GC_List
{
    display: grid;

    grid-template-areas:
    "A B C D"
    "A E E E";

    align-items: center;
}

@media screen and (max-width: 900px)
{
    
    .GC_Index
    {
        grid-template-areas: 
        "A"
        "B"
        "C";

        grid-template-columns:100%;

        justify-content: space-evenly;
    }

    Body > .H-div-Tracks
    {
        flex-direction: column;

        gap: 50px;
    }

    

    .GC_DashBoard
    {
        grid-template-areas:
        "A"
        "C"
        "B";
    }

    body > div > div > div > .H-div-Tracks
    {
        flex-direction: column;

        gap: 10px;
    }

    

    body > div > div > img
    {
        width: 200px;
    }
}