.projectItem {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--marginExtraSmallMedium);
    position: relative;
    z-index: 1;
    min-height: 350px;
    padding: var(--marginSmallMedium);
    color: var(--baseLight100);
    overflow: hidden;
    transition: all var(--timingFlash);
    border-radius: var(--borderRadiusMedium);
}

.projectItem::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 10%, rgba(0, 0, 0, 0.80) 100%);
    z-index: -1;
}

.projectItem__title {
    margin: 0;
}

.projectItem__imageWrapper {
    width: 100%;
    overflow: clip;
}

.projectItem__image {
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    z-index: -1;
    transition: scale var(--timingFlash);
}

.projectItem__link:hover .projectItem__image {
    scale: var(--imageScale);
}

.projectItem__link,
.projectItem__link:hover {
    color: inherit;
    text-decoration: none;
}

.projectItem__link {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
}

.projectItem__tag {
    margin-block-end: var(--marginExtraSmallMedium);
}

@container (min-width: calc(256px * 2 + 2rem)) {
    .projectList__highlight .projectItem:first-child {
        grid-column: span 2;
        grid-row: span 2;
    }
}

/* Only count the children that match '.projectItem:not(.--hidden)' */
@container (min-width: calc(768px + 4rem)) {
    .projectList .projectItem:nth-child(4n+1 of .projectItem:not(.--hidden)),
    .projectList .projectItem:nth-child(4n+4 of .projectItem:not(.--hidden)) {
        grid-column: span 2;
    }
}

/*
 * projectList__highlight
 */

.Article:has(.projectList__highlight) .Article__title {
    text-align: center;
}

.projectList__highlight .projectItem {
    min-height: 250px;
}

.projectList__highlight .projectItem:first-child .projectItem__title {
    font-size: var(--h2Size);
}