.h-card div:has(img) {
    width: 6rem;
    height: 6rem;
    margin-inline: auto;
}

.h-card img {
    width: 6rem;
    height: 6rem;
    border-radius: 1rem;
    filter: contrast(1.25);
}

.h-card div:has(img)::after {
    /* Colour overlay */
    background-color: var(--colour-primary-80);
    opacity: 0.3;

    /* Same size and shape as the img */
    border-radius: 1rem;
    width: 6rem;
    height: 6rem;

    /* Positioned on top of the img */
    display: block;
    position: relative;
    top: -6rem;

    /* A content value is needed to get the ::after to render */
    content: '';
}


@media (min-width: 36rem) {
    .h-card {
        grid-column: media-start / content-end;
        display: grid;
        grid-template-columns: subgrid; /** Subgrid of main column layout */
        grid-template-rows: min-content 1fr;
        grid-template-areas:
            "empty heading"
            "photo text";
    }

    .h-card div:has(img) {
        grid-area: photo;
        margin-block-start: var(--spacing-block-sm);
    }

    .h-card header {
        grid-area: heading;
    }

    .h-card__text {
        grid-area: text;
    }
}