/* Index page organization */

/* GRID */
.grid {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr 2fr 1fr;
    grid-template-areas: 
        "characters settings plots worlds sidebar";
    gap: var(--grid-spacing);
    padding: var(--padding);
}

.characters, .settings, .plots, .worlds {
    border: 1px solid var(--color-light-text);
}

.characters ul, .settings ul, .plots ul, .worlds ul{
    place-items: center;
    list-style-type: none;
    padding-left: 0;
}

.characters {
    grid-area: characters;
}
.settings {
    grid-area: settings;
}
.plots {
    grid-area: plots;
}
.worlds {
    grid-area: worlds;
}

.sidebar a{
    grid-area: sidebar;
    font-family: var(--font-header-family);
}


/* checking the size and organizing the look depending */
@media screen and (max-width: 60rem) {
    .grid {
        display: grid;
        grid-template-columns: 2fr 2fr 2fr 1fr;
        grid-template-areas: 
            "characters settings plots sidebar"
            "worlds worlds worlds sidebar";
            /* hardcoded because of the side bar */
        gap: var(--grid-spacing);
        padding: var(--padding);
    }
}

@media screen and (max-width: 45rem) {
    .grid {
        display: grid;
        grid-template-columns: 2fr 2fr 1fr;
        grid-template-areas: 
            "characters settings sidebar"
            "plots worlds sidebar";
        gap: var(--grid-spacing);
        padding: var(--padding);
    }
}

@media screen and (max-width: 35rem) {
    .grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-template-areas: 
            "characters sidebar"
            "settings sidebar"
            "plots sidebar"
            "worlds sidebar";
        gap: var(--grid-spacing);
        padding: var(--padding);
    }
}

@media screen and (max-width: 30rem) {
    .grid {
        display: grid;
        grid-template-columns: 2fr;
        grid-template-areas: 
            "sidebar"
            "characters"
            "settings"
            "plots"
            "worlds";
        gap: var(--grid-spacing);
        padding: var(--padding);
    }
}