.home-news{
    background-color: var(--color-secondary-1);
    >.container{
        padding-top: 80px;
        padding-bottom: 80px;
        >h2{
            color: var(--color-primary-2);
            margin-bottom: 24px;
        }
        >h3{
            margin-bottom: 60px;
        }
        >div{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0px 24px;
        }
    }

}
.home-news-card{
    grid-row: span 4;
    display: grid;
    grid-template-rows: subgrid;
    >.img{
        aspect-ratio: 3/2;
        overflow: hidden;
        border-radius: 10px;
        margin-bottom: 24px;
        position: relative;
        >img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
        }
        >p{
            position: absolute;
            z-index: 1;
            top: 16px;
            left: 16px;
            color: white;
            background-color: var(--color-primary-2);
            padding: 4px 16px;
            border-radius: 6px;
        }
    }
    >h4{
        transition: color 0.3s;
    }
    >p:not(.text-small){
        white-space: pre-line;
        color: var(--color-gray-3);
        margin: 16px 0;
    }
    >p.text-small{
        color: var(--color-primary-4);
        text-align: end;
    }

    &:hover{
        >h4{
            color: var(--color-primary-2);
        }
        >.img img{
            transform: scale(1.1);
        }
    }
}

@media screen and (width < 768px) {
    .home-news > .container{
        > h3{
            margin-bottom: 40px;
        }
    }
}
@media screen and (width < 576px) {
    .home-news > .container{
        padding-top: 60px;
        padding-bottom: 60px;
        > div{
            grid-template-columns: 100%;
            gap: 40px 0;
        }
    }
    .home-news-card{
        grid-row: auto;
        display: block;
        >.img{
            margin-bottom: 12px;
            > p{
                top: 12px;
                left: 12px;
            }
        }
        >p:not(.text-small){
            margin: 8px 0 12px;
        }
    }
}