:root {
    --card-radius: 12px;
}

cardgrid {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    padding-top: 8px;
    gap: var(--card-radius);
}

.project-card {
    flex: 1 1 0px;
    min-width: 300px;
    display: grid;
    grid-template-rows: 220px auto;
    transition: transform 0.2s;
    border-style: var(--global-border-style);
    border-width: var(--global-border-width);
    border-color: var(--global-border-color);
    border-radius: calc(var(--card-radius) + var(--global-border-width));
}

.project-card:hover {
    transform: scale(1.01);
}

.project-card > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    border-top-left-radius: var(--card-radius);
    border-top-right-radius: var(--card-radius);
    filter: var(--global-image-filter);
}

.cardtitle {
    display: flex;
    height: 25px;
    font-weight: 600;
    background-color: var(--global-contrast);
    color: var(--global-contrast-inverse);
    border-bottom-left-radius: var(--card-radius);
    border-bottom-right-radius: var(--card-radius);
    padding: 0.3em;
    align-items: center;
    justify-content: center;
}