.descriptive {
    background-color:lightcyan;
    grid-area: ds;
}
.characteristics {
    background-color:lightyellow;
    grid-area: ch;
}
.hp {
    background-color:lightpink;
    grid-area: hp;
}
.sheet-skills-col1 {
    grid-area:skcol1;
}
.sheet-skills-col2 {
    grid-area:skcol2;
}
/* Flexboxing to allow the column to be split into 2 different columns */
.sheet-skills-col3 {
    grid-area:skcol3;
    display:flex;
    flex-flow:row wrap;
}
.sheet-sub-col {
    width:100%;
}

/* Small breakpoint */
.fundamental-parent {
    background-color:lightgreen;
    display:grid;
    grid-gap: 0.25rem;
    grid-template-areas: 
        "ds"
        "ch"
        "hp";
}
.sheet-skills-layout{
    display:grid;
    grid-template-areas: 
        "skcol1"
        "skcol2"
        "skcol3";
    margin:1rem 0 0 0;
}

.sheet-rating-roll > span {
    display:inline-block;
    font-size:11px;
    margin: 0 0 0 -0.25rem;
}

/* Medium breakpoint */
@media(min-width:480px) {
    .fundamental-parent {
        background-color:lightgreen;
        display:grid;
        grid-gap: 0.25rem;
        grid-template-areas: 
            "ds ds ds"
            "ch ch hp";
        grid-template-columns:repeat(3, 1fr);
    }
    .sheet-skills-layout {
        grid-template-areas:
            "skcol1 skcol2"
            "skcol3 skcol3";
    }
    /* Simulates dividing this column into 2 horizontal columns */
    .sheet-skills-col3 {
        flex-flow:row nowrap;
    }
    /* TODO: Optionally prepare a small/medium threshold breakpoint to remove
    the % sign until long skill name ellipsis disappears.
    .sheet-rating-roll > span {
        display:none;
    }
    */
}
/* Large breakpoint */
@media(min-width:720px) {
    .fundamental-parent {
        display:grid;
        grid-template-columns: 3fr 2fr 1fr;
        grid-gap: 0.25rem;
        grid-template-areas: "ds ch hp";
    }
    .sheet-skills-layout {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas: "skcol1 skcol2 skcol3";
    }
    /* stack the subcols in the large breakpoint */
    .sheet-skills-col3 {
        flex-flow:row wrap;
    }
}