.sc11 {
    position: relative;
    & .news-filters {
        gap: .88em;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        & .filter-btn {
            border-radius: 0 .5em;
            text-decoration: none;
            font-size: var(--fs14);
            transition: all 0.3s ease;
            color: var(--cLDarkBlack);
            background-color: var(--cLWhite);
            padding: min(.5em,3vw) min(1em,5vw);
            border: 1px solid var(--cLDarkBlack);
            &:is(.active),
            &:hover {
                color: var(--cLWhite);
                border-color: var(--cLPrimaryBlue);
                background-color: var(--cLPrimaryBlue);
            }

        }
    }
    & .news-pagination {
        gap: 8px;
        display: flex;
        justify-content: center;
        margin-top: min(2em,5vww);
        & .page-numbers {
            padding: 6px 14px;
            border-radius: 4px;
            text-decoration: none;
            font-size: var(--fs14);
            color: var(--cLDarkBlack);
            &:is(.current) {
                color: var(--cLWhite);
                background-color: var(--cLPrimaryBlue);
            }
        }
    }
    & .news-grid {
        display: grid;
        gap: min(1em,5vw);
        filter: drop-shadow(2px 4px .4em hsl(from currentColor h s l/.15));
        grid-template-columns: repeat(auto-fill, minmax(max(min(200px, 80vw), 30%), 1fr));
        gap: 24px;
        & .cardJ {
            position: relative;
            background: var(--cLWhite);
            & picture {height: min(250px,50vw);}
            & .text {
                padding: min(20px,5vw);
                row-gap: min(0.9em,4vw);
                & .news-meta {
                    gap: 10px;
                    display: flex;
                    font-size: 12px;
                    align-items: center;
                    color: var(--cLDarkBlack);
                    & .news-badge {
                        font-size: 12px;
                        font-weight: 400;
                        padding: 3px 8px;
                        letter-spacing: 10%;
                        border-radius: 0 0 0 .5em;
                        color: var(--cLDarkBlack);
                        background-color: hsl(from var(--cLPrimaryBlue) h s l/.3);
                    }
                }
                & p:not([class]) {
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }
            }
        }
    }
}

/* Pagination */