.article--stories {
    container-name: stories;
    container-type: inline-size;
}

.postList.--stories {
    display: grid;
    grid-auto-rows: auto 1fr;
    gap: 2rem;
    margin-bottom: 4rem;
}

.--stories .postList__inner {
    container-name: list;
    container-type: inline-size;
}

.--stories .postListPost {
    display: flex;
    position: relative;
    height: 100%;
    border-radius: .5rem;
    overflow: clip;
    background-color: #eef8fe;
}

/* Change styling if the article is on a colored background */
.main--zebra .article--stories:nth-of-type(2n) .postListPost {
    background-color: #fff;
}

.--stories .postListPost__textWrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 65%;
    padding: clamp(1rem, 3vw, 2rem);
}

.--stories .postListPost__preTitle {
    margin-bottom: 0;
    color: #6e6e6e;
    font-size: .888rem;
}

.--stories .postListPost__title {
    margin-top: 0;
    text-wrap: balance;
    hyphens: auto;
}

.--stories .postListPost__imageWrapper {
    display: block;
    flex: 0 0 35%;
    overflow: clip;
}

.--stories .postListPost__image {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    transition: scale .2s ease-in-out;
}

.--stories .postListPost:hover .postListPost__image {
    scale: 1.05;
}

.--stories .postListPost__link {
    margin-top: 1rem;
    text-decoration: underline;
}

@container list (max-width: 400px) {
    .--stories .postListPost {
        flex-direction: column-reverse;
    }

    .postListPost__image {
        aspect-ratio: 16/9;
    }
}

@container stories (min-width: 568px) {
    .postList.--stories {
        --_itemWidth: 260px;
        grid-template-columns: repeat(auto-fill, minmax(var(--_itemWidth), 1fr));
    }
}

@container stories (min-width: 768px) {
    .postList.--stories {
        --_itemWidth: 300px;
    }
}

@container stories (min-width: 1024px) {
    .postList.--stories {
        --_itemWidth: 400px;
    }
}