#articles {}
#articles > .content-wrapper {}

/*--------------------------------------------------------------------------------*/

#articles > .content-wrapper > .articles {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 30px;
    row-gap: 50px;
}
#articles > .content-wrapper > .articles > .article {}
@media (min-width: 1200px)                           { #articles > .content-wrapper > .articles > .article { flex: 0 0 calc((100% - 60px) / 3); } }
@media (max-width: 1199.99px) and (min-width: 900px) { #articles > .content-wrapper > .articles > .article { flex: 0 0 calc((100% - 60px) / 3); } }
@media (max-width: 899.99px)                         { #articles > .content-wrapper > .articles > .article { flex: 0 0 100%; } }

/*--------------------------------------------------------------------------------*/

#articles > .separator {
    position: relative;
    display: flex; height: 400px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 50px;
    
    background-image: url("../../images/home-bg.jpg");
    background-attachment: fixed;
    
    color: #FFF;
}
@media (min-width: 900px)    { #articles > .separator { margin: 100px 0; } }
@media (max-width: 899.99px) { #articles > .separator { margin:  50px 0; } }
#articles > .separator:before {
    content: '';
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
    
    background-color: #000;
    
    opacity: .3;
}
#articles > .separator > * { position: relative; z-index: 2; }
#articles > .separator > .logo {
    display: block;
    
    background-color: #FFF;
    
    -webkit-mask-image: url("../../images/logo.svg");
    mask-image: url("../../images/logo.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
#articles > .separator > .logo:after {
    content: '';
    display: block;
    padding-top: 23.5%;
}
#articles > .separator > .cta-link {
    font-weight: 700;
}
@media (min-width: 900px) {
    #articles > .separator > .logo { width: 500px; }
    #articles > .separator > .cta-link { font-size: 18px; }
}
@media (max-width: 899.99px) {
    #articles > .separator > .logo { width: 225px; }
    #articles > .separator > .cta-link { font-size: 14px; }
}

/*--------------------------------------------------------------------------------*/

#articles > .content-wrapper > .cta-wrapper { text-align: center; }
@media (min-width: 900px)    { #articles > .content-wrapper > .cta-wrapper { margin-top: 100px; } }
@media (max-width: 899.99px) { #articles > .content-wrapper > .cta-wrapper { margin-top:  50px; } }
#articles > .content-wrapper > .cta-wrapper > .cta-link {
    font-weight: 700;
    cursor: pointer;
}