/* List-block */
.list-block {
    position: relative;
    translate: 0 -1px;
}

/* Mobile */
@media only screen and (max-width: 64rem) {
    .list-block {
        margin-bottom: 0.35rem;
    }
}

.list-block.hidden {
    display: none;
}

.list-block__hr.hidden {
    display: none;
}

@media print {
    .list-block.hidden {
        display: block;
    }

    .list-block__hr.hidden {
        display: block;
    }
}

.list-block__aside {
    grid-column: 1/-1;
    
}

.list-block__content {
    grid-column: 1/-1;
}

/* Desktop */
@media only screen and (min-width: 64rem) {
    .list-block__aside {
        grid-column: 1/3;
        grid-row: 1/4;
        padding-right: 1rem;
        transition: 200ms ease;
    }

    .list-block__content {
        grid-column: 3/-2;
        transition: 200ms ease;
        /* text-wrap: balance; */
    }

    .list-block.link:hover .list-block__content,
    .list-block.link:hover .list-block__aside {
        color: #888888;
        opacity: 1;
    }

    .list-block.no-aside .list-block__content {
        grid-column: 1/-1;
    }
}

/* Date */

.date .date-element + .date-element::before {
    content: ".";
}

.date {
    display: flex;
    flex-wrap: wrap;
}

.dont-break-out {
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: none;
    -moz-hyphens: none;
    -webkit-hyphens: none;
    hyphens: none;
}