.news-list {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap:2rem;
    padding-block:5vw;
}

    .news-list-item {
        text-decoration: none;
        background-color:var(--beige);
        border-radius:3px;
        overflow: hidden;
        transition:margin 0.5s ease-out;
        &:hover {
            margin-top:-0.5rem;
            margin-bottom:0.5rem;
        }
    }

        .news-list-item > img {
            width:100%;
            aspect-ratio:1.6;
            object-fit:cover;
        }

        .news-list-item .text {
            padding:1rem;
        }

        .news-list-item h2 {
            color:var(--green);
            font-size: 1.4rem;
            font-weight:500;
            line-height:1;
            margin-bottom: 0.75rem;
        }

        .news-list-item .date {
            margin-bottom:0.5rem;
        }

        .news-list-item p {
            font-size:1rem;
            line-height:1.6;
        }

        .news-list-item .text p:last-child {
            margin-bottom:0;
        }

        .news-list-item:nth-of-type(4n+2){
            animation-delay: 0.1s;
        }
        .news-list-item:nth-of-type(4n+3){
            animation-delay: 0.2s;
        }
        .news-list-item:nth-of-type(4n+4){
            animation-delay: 0.3s;
        }

article {
    padding-block:5vw;
}

    article .cols{
        display:grid;
        grid-template-columns: 2fr 1fr;
        grid-gap:3rem;
    }

    .other-imgs {
        display:grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        grid-gap:1rem;
        margin-block:3rem;
    }

        .other-imgs a {
            text-decoration: none;
            border:1px solid #ddd;
            padding:0.25rem;
        }

            .imgdesc {
                font-size:0.8rem;
                font-style: italic;
                line-height:1;
                margin:0.25rem 0 0;
            }

@media screen and (max-width:1199px){
    .news-list {
        padding-inline:5vw;
    }

    article {
        padding-inline:5vw;
    }

    h1 {
        font-size:3rem;
    }
}

@media screen and (max-width:999px){
    .news-list {
        
    }
}

@media screen and (max-width:699px){
    .news-list {
        
    }

    article .cols {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width:499px){
    .news-list {
        
    }
}