.card-block {
    position: relative;
}

.card-block.side .card-block__cover,
.card-block.side .card-block__content {
    grid-column: 1/-1;
}

.card-block__cover {
    margin-bottom: 0.75rem;
    aspect-ratio: 3/2;
    object-fit: cover;
    display: block;
}

.card-block__cover.vertical {
    aspect-ratio: unset;
}

/* Placeholder */
.card-block__placeholder {
    background-color: black;
    padding: 6rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

.card-block__placeholder.yellow {
    background-color: #FFD600;
}
.card-block__placeholder.purple {
    background-color: #9747FF;
}
.card-block__placeholder.gray {
    background-color: #D2D2D2;
}
.card-block__placeholder.black {
    background-color: black;
}

.card-block__placeholder.horizontal,
.card-block.horizontal .card-block__placeholder {
    padding: 0 1rem;
    aspect-ratio: 3/2;
}

.card-block__placeholder__circle {
    width: auto;
    height: 80%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 2px solid var(--placeholderStroke, white);
}

.card-block__placeholder.yellow .card-block__placeholder__circle {
    border-color: black;
}

.card-block__placeholder.purple .card-block__placeholder__circle {
    border-color: white;
}

.card-block__placeholder.gray .card-block__placeholder__circle {
    border-color: white;
}

.card-block__placeholder.black .card-block__placeholder__circle {
    border-color: white;
}

.card-block.horizontal .card-block__placeholder__circle {
    height: calc(100% - 2rem);
}

.card-block__placeholder.large .card-block__placeholder__circle {
    border-width: 3px;
}

.card-block.horizontal .card-block__placeholder.large .card-block__placeholder__circle {
    height: calc(100% - 3rem);
}


/* Desktop */
@media only screen and (min-width: 64rem) {
    .card-block .card-block__content {
        transition: 200ms ease;
    }

    .card-block .card-block__cover,
    .card-block .card-block__placeholder {
        transition: 200ms;
    }
    
    .card-block:hover .card-block__cover,
    .card-block:hover .card-block__placeholder {
        opacity: 0.5;
    }

    .card-block.no-hover:hover .card-block__cover,
    .card-block:hover .card-block__placeholder {
        opacity: 1;
    }

    .card-block:hover .card-block__content {
        color: #888888;
        opacity: 1;
    }

    .card-block .card-block__cover {
        object-position: 0 0;
        object-fit: contain;
    }

    .card-block .card-block__cover.landscape {
        object-fit: cover;
    }

    .card-block.side .card-block__placeholder,
    .card-block.side .card-block__cover {
        margin-bottom: 0;
    }

    .card-block__placeholder__circle {
        border: 2px solid var(--placeholderStroke, white);
    }

    .card-block.side .card-block__cover {
        grid-column: 1/5;
    }

    .card-block.side .card-block__content {
        grid-column: 5/-1;
    }

    .card-block__placeholder.large .card-block__placeholder__circle {
        border-width: 4px;
    }

    .card-block.horizontal .card-block__placeholder.large .card-block__placeholder__circle {
        height: calc(100% - 4rem);
    }
}