.news-filter-box { width: 100%; max-width: 277px; margin: 0 auto 15px; }
/* ---- */ 
ul.news-filter-feed-list { width: calc(100% + 30px); margin-left: -15px; display: flex; flex-wrap: wrap; }
ul.news-filter-feed-list li.nff-item { padding: 0 15px; width: 33.33%; margin-bottom: 80px; height: auto; }
.nff-box { color:var(--nhc-black); background: var(--nhc-light-grey); display: flex; flex-flow: column; height: 100%; border-radius: 30px; overflow: hidden; }
.nff-img { background: #333; position: relative; padding-bottom: 58.8%; width: 100%; overflow: hidden; }
.nff-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: all .3s ease; }
.nff-content { font-size: 16px; padding: 24px; display: flex; flex-flow: column; flex-grow: 1; }
.nff-tag { display: inline-block; background-color: var(--nhc-white); border-radius: 4px; font-size: 14px; font-weight: 600; padding: 4px 8px; }
.nff-read-time { font-size: 14px; line-height: 1.5; font-weight: 600; }
.nff-content h3 { font-size: 24px; line-height: 1.4; margin-bottom: 8px; }
.nff-box:hover .nff-img img { transform: scale(1.05); }

ul.news-filter-feed-list li.nff-item:first-child .link { display: none; }
/* ---- */
.news-filter-feed-container .nff-item:first-child { width: 100% !important; }
.news-filter-feed-container .nff-item:first-child .nff-box { flex-flow: row; }
.news-filter-feed-container .nff-item:first-child .nff-img { width: 50%; padding-bottom: 36.4%; }
.news-filter-feed-container .nff-item:first-child .nff-content { width: 50%; padding: 48px; font-size: 18px; }
.news-filter-feed-container .nff-item:first-child .nff-content h3 { font-size: 52px; line-height: 1.2; }
/* ---- */
ul.resource-filter-feed-list { width: calc(100% + 30px); margin-left: -15px; display: flex; flex-wrap: wrap; }
ul.resource-filter-feed-list li.rff-item { padding: 0 15px; width: 33.33%; margin-bottom: 80px; height: auto; }
.rff-box { color:var(--nhc-black); background: var(--nhc-light-grey); display: flex; flex-flow: column; height: 100%; border-radius: 30px; overflow: hidden; }
.rff-img { background: #333; position: relative; padding-bottom: 58.8%; width: 100%; overflow: hidden; }
.rff-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: all .3s ease; }
.rff-content { font-size: 16px; padding: 32px; display: flex; flex-flow: column; flex-grow: 1; }
.rff-tag { display: inline-block; background-color: var(--nhc-white); border-radius: 4px; font-size: 14px; font-weight: 600; padding: 4px 8px; }
.rff-read-time { font-size: 14px; line-height: 1.5; font-weight: 600; }
.rff-content h3 { font-size: 24px; line-height: 1.4; margin-bottom: 8px; }
.nff-box:hover .nff-img img { transform: scale(1.05); }
.rff-box-foot { margin-top: auto; }
/* ---- */
ul.video-filter-feed-list { width: calc(100% + 30px); margin-left: -15px; display: flex; flex-wrap: wrap; }
ul.video-filter-feed-list li.vff-item { padding: 0 15px; width: 33.33%; margin-bottom: 80px; height: auto; }
.vff-box { color:var(--nhc-black); background: var(--nhc-light-grey); display: flex; flex-flow: column; height: 100%; border-radius: 30px; overflow: hidden; }
.vff-img { background: #333; position: relative; padding-bottom: 56%; width: 100%; overflow: hidden; }
.vff-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: all .3s ease; }
.vff-img::after { content: ''; width: 82px; height: 82px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--nhc-green); background-image: url(../../assets/images/video-play-icon.svg); background-repeat: no-repeat; background-position: center; background-size: 38px 38px; border-radius: 50%; }
.vff-content { font-size: 16px; padding: 32px; display: flex; flex-flow: column; flex-grow: 1; }
.vff-tag { display: inline-block; background-color: var(--nhc-white); border-radius: 4px; font-size: 14px; font-weight: 600; padding: 4px 8px; }
.vff-read-time { font-size: 14px; line-height: 1.5; font-weight: 600; }
.vff-content h3 { font-size: 24px; line-height: 1.4; margin-bottom: 24px; }
.vff-box:hover .nff-img img { transform: scale(1.05); }
.filter-container { position: relative; z-index: 99; }
 
/* ========================================== 
! Extra Large devices (desktops, less than 1400px)
=========================================== */
@media (max-width:1399.98px) {
 .news-filter-feed-container .nff-item:first-child .nff-content h3 { font-size: 44px; }
 }
/* ========================================== 
! Large devices (desktops, less than 1200px)
=========================================== */
@media (max-width:1199.98px) {
 ul.news-filter-feed-list li.nff-item, ul.news-filter-feed-list li.vff-item, ul.resource-filter-feed-list li.rff-item, ul.video-filter-feed-list li.vff-item { width: 50%; }
.news-filter-feed-container .nff-item:first-child .nff-content h3 { font-size: 36px; }
 }
/*==========================================
! Medium devices (tablets, less than 992px)
========================================== */
@media (max-width:991.98px) {
 .news-filter-feed-container .nff-item:first-child .nff-content { padding: 24px; }
.news-filter-feed-container .nff-item:first-child .nff-content h3 { font-size: 28px; }
 }
/* =================================================  
! Small devices (landscape phones, less than 768px)
================================================= */
@media (max-width:767.98px) {
 ul.news-filter-feed-list li.nff-item, ul.news-filter-feed-list li.vff-item, ul.resource-filter-feed-list li.rff-item, ul.video-filter-feed-list li.vff-item { width: 100%; margin-bottom: 48px; }
.nff-img { padding-bottom: 67%; }
.nff-content h3 { font-size: 20px; }
/* ---- */
.news-filter-feed-container .nff-item:first-child .nff-box { flex-flow: column; }
.news-filter-feed-container .nff-item:first-child .nff-img { width: 100%; padding-bottom: 67%; }
.news-filter-feed-container .nff-item:first-child .nff-content { width: 100%; font-size: 16px; line-height: 1.5; }
.news-filter-feed-container .nff-item:first-child .nff-content h3 { font-size: 20px; line-height: 1.4 }
/* ---- */
.rff-img { padding-bottom: 67%; }
.rff-content h3 { font-size: 20px; }
/* ---- */ 
.vff-content h3 { font-size: 20px; }
 }
/* ======================================================
! Extra small devices (portrait phones, less than 576px)
====================================================== */
@media (max-width:575.98px) {
 .news-filter-box { max-width: 100%; }
 }