/*
Solo para referencia. Estas variables están definidas en style.css
:root {
    --dark-color: #333333;
    --dark-gray-color: #555555;
    --gray-color: #aaaaaa;
    --light-gray-color: #e7e7e7;
    --light-color: #ffffff;
    --primary-color: #1766ae;
    --secondary-color: #f39222;
    --terciary-color: #dd2727;
    --light-shadow: #00000038;
    --dark-blue-color: #183153;
    --transition: 250ms;
    --bold-font: 800;
    --thin-font: 300;
    --font-family-primary: 'Montserrat';
}
*/

.news {
    width: 100%;
    .news__content {
        width: 100%;
        .news__loop {
            width: 100%;
            display: flex;
            align-items: stretch;
            justify-content: space-evenly;
            flex-wrap: wrap;
            margin: 2rem 0;
            padding: 0 1.5rem;
        }
    }
}

.news-item {
    width: 100%;
    max-width: 512px;
    transition: var(--transition);
    border: 1px solid var(--light-gray-color);
    box-shadow: 4px 4px 8px var(--light-shadow);
    margin: 1.5rem;
    cursor: pointer;
    .news-item__content {
        width: 100%;
        .news-item__image {
            width: 100%;
            height: 100%;
            max-height: 200px;
            overflow: hidden;
            padding: 0;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: var(--transition);
            }
        }
        .news-item__info {
            width: 100%;
            height: auto;
            padding: 1rem;
            h5 {
                height: 43.25px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            p {
                height: 90px;
                display: -webkit-box;
                -webkit-line-clamp: 4;
                line-clamp: 4;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
    &:hover .news-item__image {
        img {
            transform: scale(1.1);
        }
    }
    &:hover .news-item__info {
        span {
            color: var(--primary-color);
        }
    }
}

@media (width <= 578px) {

    .news-item {
        max-width: 100%;
        margin: 1rem 0;
    }
}