@layer pages {

    .news-grid {
        display: grid;
        gap: var(--space-3);
        margin-top: var(--space-5);
        grid-template-columns: repeat(4, 1fr);

        @media (max-width: 64rem) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (max-width: 48rem) {
            grid-template-columns: repeat(1, 1fr);
            gap: var(--space-2);
        }
    }
}