.member {
    display: grid;
    grid-template-areas:
                    "pfp pfp pfp pfp pfp pfp"
                    "desc desc desc flags flags flags"
                    "names names prns prns compl compl"
                    "legend legend legend legend legend legend";
    grid-auto-columns: 1fr;
    grid-gap: 1rem;
    margin-bottom: 1rem;
}

/*@media (max-width: 530px) {*/
/*    .member {*/
/*        grid-template-areas: "pfp pfp"*/
/*                    "desc flags"*/
/*                    "names names"*/
/*                    "prns prns"*/
/*                    "compl compl";*/
/*    }*/
/*}*/

@media (max-width: 530px) {
    .member {
        grid-template-areas: "pfp"
                             "flags"
                             "desc"
                             "names"
                             "prns"
                             "compl"
                             "legend";
    }
}

.profile {
    grid-area: pfp;
    /*display: flex;*/
    /*justify-content: flex-start;*/
    /*align-items: center;*/
    /*flex-wrap: nowrap;*/
}

/*.profile > div {*/
/*    justify-self: stretch;*/
/*    padding-left: 1rem;*/
/*    padding-right: 15px;*/
/*}*/

.description {
    grid-area: desc;
}

.pronouns {
    grid-area: prns;
}

.names {
    grid-area: names;
}

.words {
    grid-area: compl;
}

.flags {
    grid-area: flags;
}

.legend {
    grid-area: legend;
    font-size: small;
}

.legend-content {
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    color: var(--subtext);
    margin-bottom: 0;
    margin-top: 1rem;
}

.legend-content > li {
    display: block;
    padding: 0.25rem;
    margin-left: .5rem;
    margin-right: .5rem;
    flex: 0 1 content;
}

.flags-list {
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

.flags-list > li {
    display: block;
    padding: 0.25rem;
    flex: 0 1 content;
}

.flag {
    height: 1.1rem;
    margin-right: .25rem;
    border-radius: 2px;
    vertical-align: middle;
}