.document-block {
    position: relative;
    text-align: center;
}

.document-block__cover {
    margin-bottom: 0.75rem;
}

.document-block__placeholder {
    padding: 1rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.25rem;
}

.document-block__placeholder__circle {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 300ms ease;
}

.document-block.link .document-block__placeholder__text {
    opacity: 0;
}

.document-block.link:hover .document-block__placeholder__circle {
    background-color: black;
}

.document-block.link:hover .document-block__placeholder__text {
    color: white;
    opacity: 1;
}


.document-block.link-visible:hover .document-block__placeholder__circle {
    background-color: black;
}

.document-block.link-visible:hover .document-block__placeholder__text {
    color: white;
}

.document-block.side .document-block__placeholder,
.document-block.side .document-block__content {
    grid-column: 1/-1;
}

/* Desktop */
@media only screen and (min-width: 64rem) {

}