/* ===================================================
   LARGE TABLET
=================================================== */

@media screen and (max-width:1200px){

.cba-wrapper{
    gap:30px;
}

.cba-grid{
    grid-template-columns:repeat(2,1fr);
}

.cba-top-bar h2{
    font-size:38px;
}

}

/* ===================================================
   TABLET
=================================================== */

@media screen and (max-width:992px){

.cba-wrapper{
    flex-direction:column;
}

.cba-left{
    width:100%;
}

.cba-sidebar{
    width:100%;
}

.cba-grid{
    grid-template-columns:repeat(2,1fr);
}

.cba-search-form{
    width:100%;
}

.cba-search-form input{
    flex:1;
    width:100%;
}

.cba-widget{
    margin-top:30px;
}

}

/* ===================================================
   MOBILE
=================================================== */

@media screen and (max-width:767px){

.cba-wrapper{
    display:flex;
    flex-direction:column;
}

.cba-sidebar{
    order:-1;
}

.cba-grid{
    grid-template-columns:1fr;
}

.cba-top-bar{
    flex-direction:column;
    align-items:flex-start;
}

.cba-top-bar h2{
    font-size:32px;
}

.cba-search-form{
    width:100%;
}

.cba-search-form input{
    width:100%;
}

.cba-search-form button{
    width:100%;
}

.cba-widget{
    padding:20px;
}

.cba-widget h3{
    font-size:24px;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.cba-widget h3::after{
    content:"+";
    font-size:24px;
}

.cba-widget.active h3::after{
    content:"−";
}

.cba-widget ul{
    display:none;
    margin-top:20px;
}

.cba-widget.active ul{
    display:block;
}

.cba-latest{
    display:flex;
    align-items:center;
}

.cba-latest img{
    width:70px;
    height:70px;
}

.cba-pagination{
    margin-top:30px;
}

}

/* ===================================================
   SMALL MOBILE
=================================================== */

@media screen and (max-width:480px){

.cba-card h3{
    font-size:20px;
}

.cba-content{
    padding:18px;
}

.cba-meta{
    flex-direction:column;
    gap:5px;
}

.cba-search-form{
    display:flex;
    flex-direction:column;
}

.cba-search-form button{
    margin-top:10px;
}

}