.news-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    width: 80vw;
    max-width: 1600px;
    margin: 0 auto;

    article {
        position: relative;
        display: flex;
        flex-direction: column;
        background-color: #F0F0F0;
        border-radius: 5px;
        overflow: hidden;

        img {
            width: 100%;
            height: 300px;
            object-fit: cover;
            object-position: center;
            cursor: pointer;
            transition: transform 350ms ease;
        }

        &:hover img {
            transform: scale(1.2);
        }

        &:hover div {
            padding-bottom: 20px;
        }

        h3, h4 {
            margin: 0 15px 10px;
        }

        div {
            position: absolute;
            width: 100%;
            min-height: 0;
            bottom: 0;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            background-color: #ffffffc2;

            transition: padding 350ms ease;
        }

        h3 {
            color: var(--algebra-red);
            margin-top: 10px;
        }
    }
}