.news-listing {
    padding: 65px 0 80px
}

.news-listing__intro h1 {
    margin: 0;
    color: var(--blue);
    font: 800 42px/1 Poppins, Arial, sans-serif
}

.news-listing__line {
    width: 90px;
    height: 3px;
    margin: 14px 0;
    background: var(--green)
}

.news-listing__intro p {
    margin: 0;
    color: var(--blue);
    font: 600 14px/1.35 Poppins, Arial, sans-serif
}

.news-filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 65px 0 44px
}

.news-filters select,
.news-search {
    width: 300px;
    height: 48px;
    border: 2px solid #ddd;
    border-radius: 9px;
    background: #fff;
    color: #555;
    font: 600 12px Poppins, Arial, sans-serif
}

.news-filters select {
    padding: 0 14px
}

.news-search {
    display: flex;
    align-items: center;
    padding: 0 14px
}

.news-search input {
    width: 100%;
    border: 0;
    outline: 0;
    font: 600 12px Poppins, Arial, sans-serif
}

.news-search i {
    color: #333;
    font-size: 18px
}

.news-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 58px;
    row-gap: 42px
}

.news-card a {
    display: block;
    color: var(--blue);
    text-decoration: none
}

.news-card__image {
    position: relative
}

.news-card__image img {
    display: block;
    width: 100%;
    height: 250px;
    border-radius: 9px;
    object-fit: cover
}

.news-card__image span {
    position: absolute;
    left: 18px;
    bottom: 16px;
    background: var(--green);
    border-radius: 4px;
    padding: 5px 10px;
    color: #fff;
    font: 800 11px 'Open Sans', Arial, sans-serif
}

.news-card h2 {
    margin: 18px 4px 8px 0;
    color: var(--blue);
    text-align: left;
    font: 800 23px/1.18 Poppins, Arial, sans-serif
}

.news-card p {
    margin: 0 0 14px;
    color: var(--blue);
    font: 600 12px/1.45 Poppins, Arial, sans-serif
}

.news-card time {
    color: #486174;
    font: 400 10px Poppins, Arial, sans-serif
}

.news-load-more {
    display: block;
    margin: 55px auto 0;
    border: 0;
    border-radius: 7px;
    background: var(--green);
    color: #fff;
    padding: 12px 28px;
    text-transform: uppercase;
    font: 600 12px Poppins, Arial, sans-serif;
    cursor: pointer
}

@media(max-width:767.98px) {
    .news-listing {
        padding: 45px 24px 60px
    }

    .news-listing__intro h1 {
        font-size: 36px
    }

    .news-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        margin: 40px 0 32px
    }

    .news-filters select,
    .news-search {
        width: 100%
    }

    .news-cards {
        grid-template-columns: 1fr;
        gap: 34px
    }

    .news-card__image img {
        height: 210px
    }

    .news-card h2 {
        font-size: 21px
    }
}