body {
    grid-template-columns: [nav] 1fr [content] 3fr [end];
}

nav {
    display: grid;
    grid-template-rows: auto 1fr;
}

h3 {
    text-align: center;
    color: var(--font-colour);
}

.comments {
    overflow-y: auto;
    max-height: calc(100vh - 18em);

    & > p {
        margin-top: 0.5em;
        padding-top: 0.5em;
    }

    & > p:not(:first-child) {
        border-top: 1px solid darkgrey;
    }

}

textarea {
    width: 23.6vw;
    height: 10em;
    margin-top: 1.2em;
    padding: 0.3em;
}

button {
    margin-top: 0.3em;
    margin-left: calc(100% - 6.3em);
    margin-bottom: 0.5em;

    width: 6em;
    height: 2em;

    font-weight: bold;
    color: var(--font-colour);
}

article {
    grid-template-rows: 4em 1fr min-content;

    & p {
        padding: 0.5em;
        text-align: justify;
        margin-bottom: 0.6em;
    }

}

p.hintToComment {
    color: #808080;
}