.media-filter-header .content-block-full {
    width: 100%;
}

.news-list-featured {
    clear: both;
    position: relative;
    overflow: hidden;
}
.news-list-featured li {
    display: inline-block;
    padding: 4px;
    vertical-align: top;
}

.news-list-featured .content-block-full {
    width: 426px;
}

.news-list-featured .news-article .news-wrapper h3 {
    font-size: 110%;
}

.news-list-featured .news-article .news-wrapper p {
    font-size: 86%;
    clear: both;
}

.news-divider {
    margin: 1.5em auto ;
    border: 1px solid #30A8D6;
}

.news-list li {
    display: inline-block;
    padding: 4px;
    vertical-align: top;
}

.content-block img {
    border-radius: 5px;
}

.content-block-full {
    width: 280px;
}

.content-block .news-article img {
    width: 100%;
    margin-bottom: 1em;
}

.news-article {
    background-color: #ffffff;
}
.news-article img {
    max-height: 100%;
    max-width: 100%;
}

html.no-touch .news-article:hover {
    background-color: #F2F2F2;
}

.news-article .news-wrapper {
    float: none;
    /* height: auto; */
    width: 100%;
    clear: both;
}

.news-article .news-wrapper .date-and-tags .date {
    margin: 0 0 0.05em 0.5em;
}

.news-article .news-wrapper .date-and-tags .tags {
    margin: 0.05em 0 10px 0.5em;
    clear: left;
}

@media (min-width: 1px) and (max-width: 960px) {

    .media-filter-header .content-block-full {
        width: 89.1%;

    }

    .news-list-featured .content-block-full {
        width: 89.1%;
    }


    .news-list-featured .news-article .news-wrapper {
        float: left;
        height: auto;
        width: 100%;
        clear: none;
        margin: 0;
    }

    .news-list-featured .content-block .news-article img {
        width: 100%;
        margin-bottom: 1em;
    }

    .news-list-featured .news-article .news-wrapper .date-and-tags .date {
        margin: 0 0 0.05em 0;
    }

    .news-list-featured .news-article .news-wrapper .date-and-tags .tags {
        margin: 0.05em 0 10px 0;
        clear: left;
    }

    .news-divider {
        width: 89.1%;
    }

    .news-article {
        min-height: auto;
    }

    .news-article .news-wrapper {
        float: left;
        height: auto;
        width: 60%;
        clear: none;
        margin: 0;
    }

    .content-block-full {
        width: 89.1%;
    }

    .content-block .news-article img {
        width: 40%;
    }

    .news-article .news-wrapper .date-and-tags .date {
        margin: 0 0 0.05em 0;
    }

    .news-article .news-wrapper .date-and-tags .tags {
        margin: 0.05em 0 0 0;
        clear: left;
    }

    .news-article .news-wrapper h3 {
        font-size: 100%;
        margin: 0.25em 0 0.75em 0.5em;
    }
}

#article-filters-menu > label {
    user-select: none;
}
#article-filters-menu > ul {
    display: none;
}
#article-filters-menu > label.opened ~ ul {
    display: block;
}
#article-filters-menu > ul > li {
    padding: 0;
    width: 100%;
}
#article-filters-menu > ul a {
    text-decoration: none;
    display: block;
    text-align: left;
    color: #fff;
    padding: 0.75em 3.125% 0.675em;
    z-index: 50;
}

/*
For GES-979, in news-landing.ftl, we added main.js to be loaded in the page.
This resulted in two .custom-select-menu UI items.
Main.js from legacy PCOM is to be treated as a black-box, so it's not feasible to fix the JavaScript
to fix the root cause of the duplicated UI elements.
Below is a workaround to hide the first .custom-select-menu element which is added by main.js.
 */
.custom-select-wrapper .custom-select-menu {
    display: none;
}
/* Show the second .custom-select-menu element which also has an id of #article-filters-menu. */
#article-filters-menu {
    display: block;
}