.postList.--imageGrid {
    margin: 0;
    padding: 0;
    list-style: none;
}

.--imageGrid .postListPost {
    position: relative;/** Ensures that the u-coverLink does not exceed the size of its parent element */
    container-type: inline-size;
    transition: all var(--timingFlash);
}

.--imageGrid .postListPost__inner {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    padding: var(--marginSmall);
    aspect-ratio: 2/3;
    border-radius: var(--borderRadiusSmall);
    box-shadow: var(--boxShadow);
}

.--imageGrid.--square .postListPost__inner {
    aspect-ratio: 1;
}

.--imageGrid .postListPost > * {
    color: var(--baseLight100);
}

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

.--imageGrid .postListPost__title {
    color: var(--baseLight100);
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.--imageGrid .postListPost__meta {
    margin-block: auto 1rem;
}

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

.--imageGrid .postListPost:hover .postListPost__image {
    scale: var(--imageScale);
}

.--imageGrid .postListPost__image.--fallback {
    background-color: var(--secondaryColor500);
}

@container (min-width: 300px) {
    .--imageGrid .postListPost__inner {
        padding: var(--marginMedium);
    }
}