/*BLOG*/
/*containers*/
.meta-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.container.container-round {
    display: flex;
    flex-flow: column wrap;
    align-content: center;
    color: var(--green);
    width: 25em;
}

.container a {
    color: var(--green);
    border-bottom: solid 2px var(--green);
}

/*header*/
.blog-head:hover .blog-title {
    text-decoration: underline;
}

.blog-title {
    font-size: 1.5em;
    font-weight: 700;
    margin: 0em;
}

/*GRID layout*/
.blog-head {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 0.5fr, 1fr;
    cursor: pointer;
}

.date {
    grid-column: 1 / span 4;
    grid-row: 1;
    align-self: end;
    margin-bottom: 0.2em;
}

.blog-title {
    grid-column: 1 / span 4;
    grid-row: 2;
    width: 100%;
}

.portrait {
    grid-column: 5 / span 1;
    grid-row: 2;
    justify-self: end;
}

.open {
    max-width: 5em;
    display: none;
}

/*description*/
.description.hidden { display: block; }
.description.visible { display: block; }

/*Image*/
.portrait {
    border-radius: 10em;
    width: 5em;
}