h2 {
    font-size     : 48px;
    font-weight   : bold;
    margin-bottom : 20px;
}
.news-grid {
    display               : grid;
    grid-template-columns : repeat(3, 1fr);
    gap                   : 30px;
}
@media (max-width : 1200px) {
    .news-grid {
        grid-template-columns : repeat(2, 1fr);
    }
}
@media (max-width : 768px) {
    .news-grid {
        grid-template-columns : 1fr;
    }
}
.news-item {
    background-color : white;
    border           : 1px solid #ddd;
    border-radius    : 8px;
    overflow         : hidden;
    box-shadow       : 0 4px 6px rgba(0, 0, 0, 0.1);
    transition       : transform 0.3s ease, opacity 0.5s ease, transform 0.5s ease;
    height           : 500px;
    opacity          : 0;
    transform        : translateY(20px);
}
.news-item.show {
    opacity   : 1;
    transform : translateY(0);
}
.news-item:hover {
    /*transform : translateY(-5px);*/
    border : 4px solid #0D1D41;
    cursor : pointer;
}
.news-image-container {
    position : relative;
    overflow : hidden;
}
.news-image {
    width      : 100%;
    height     : 300px;
    object-fit : cover;
    transition : transform 0.3s ease;
}
.news-item:hover .news-image {
    transform : scale(1.1);
}
.news-overlay {
    position         : absolute;
    top              : 0;
    left             : 0;
    width            : 100%;
    height           : 100%;
    background-color : rgba(0, 0, 0, 0.5);
    display          : flex;
    align-items      : center;
    justify-content  : center;
    opacity          : 0;
    transition       : opacity 0.3s ease;
}
.news-item:hover .news-overlay {
    opacity : 1;
}
.news-overlay-text {
    color       : white;
    font-size   : 18px;
    font-weight : bold;
}
.news-content {
    padding : 15px;
}
.news-title {
    font-size     : 18px;
    margin-bottom : 10px;
}
.news-date {
    font-size  : 14px;
    color      : #666;
    text-align : right;
}
.news-item a {
    text-decoration : none;
}