.flex-articles.has-bg{
    padding:4rem 0;
}

.flex-articles.bg-gray{
    background:#f9f9f9;
}

.flex-articles-wrapper{
    position:relative;
    padding:0 3rem;
}

.flex-articles .swiper-controls{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    margin-bottom:0.5rem;
    padding:0.25rem;
}

.flex-articles .swiper-btn-nav{
    display:flex;
    gap:.675rem;
    justify-content:flex-end;
}

.flex-articles .swiper-btn{
    width:28px; height:28px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#3e748f;
    transition:all 0.2s ease;
    cursor:pointer;
    position:relative;
    top:inherit; margin:0;
    left:0;
}

.flex-articles .swiper-btn:hover{
    transform:scale(1.05);
    background:rgba(0,0,0,.675);
    background:#224d61;
}

.flex-articles .swiper-btn:active{
    transform:scale(0.95);
}

.flex-articles .swiper-btn:after{ display:none; }

.flex-articles .swiper-btn svg{
    display:block;
    fill:#fff;
    width:16px;
    position:relative;
}

.flex-articles .swiper-button-prev svg{ left:-1px; }
.flex-articles .swiper-button-next svg{ right:-1px; }

.flex-articles .swiper-slide { height: auto; }
.flex-articles .swiper-button-lock{ display:none; }


.flex-articles .article figure{ 
    margin:0 0 1rem; 
    aspect-ratio:16/9; 
    /* border-radius:0.5rem; */
    overflow:hidden;
}

.flex-articles .article img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.flex-articles.has-bg .swiper-wrapper{ padding-bottom:1rem; }

.flex-articles.has-bg .article{
    background:#fff;
    border-radius:0.5rem;
    overflow:hidden;
    box-shadow:0px 3px 8px rgba(0,0,0,.08)
}

.flex-articles.has-bg .article-content{
    padding:1rem 1.5rem 1.5rem;
}

.flex-articles .article .superheading{
    font-size:0.75rem;
    display:block;
    text-transform:uppercase;
    margin:0 0 0.25rem;
    color:#666;
}

.flex-articles .article h4{ margin:0 0 0.5rem; }
.flex-articles .article .description{ margin:0 0 0.5rem; font-size:0.875rem; }
.flex-articles .article a{
    display:inline-flex;
    align-items:center;
    gap:0.25rem;
    font-size:0.875rem;
}

.flex-articles .article a .svg-group{ display:inline-flex; }
.flex-articles .article a svg{ width:14px; fill:#3e748f; }

.article-links{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
}

.article-links a{ white-space:nowrap; }

@media screen and (min-width:767px){
    .flex-articles-wrapper{ padding:0; }
}