.section {
    background-color: #fff;
    padding: 3.5em 15%;
}

.article-card {
    height: 28rem;
}

.article-card-panel {
    border-bottom: groove 1px #9e9e9e;
    height: 28%;
    padding: 8px 0px;
}
  
.article-header {
    font-weight: 600;
    padding: .5rem 0;
}

.article-description {
    color: #9e9e9e;
    font-size: 1rem;
}
.img-article{
    object-fit: cover;
    height: 60%;
    width: 100%;
}
.paginate_button {
    position: relative;
    cursor: pointer;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    border: 1px solid #fec619;
}
.pagination {
    display: inline-block;
}
.pagination > li {
    display: inline;
}
.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    color: #fec619 !important;
}

@media only screen and (max-width: 1600px){

}

@media only screen and (max-width: 1366px){
    .article-card-footer {
        padding: 8px;
    }

    .img-article {
        height: 60%;
        width: 100%;
    }
}

@media only screen and (max-width: 1200px) {
    .section {
        padding: 3.5em 5%;
    }
}

@media only screen and (max-width: 1024px) {}

@media only screen and (max-width: 992px) {}

@media only screen and (max-width: 720px) {}

@media only screen and (max-width: 576px) {
    .section {
        padding: 3em 10%;
    }
}

@media only screen and (max-width: 480px) {
    .section {
        padding: 3em 8%;
    }
}

@media only screen and (max-width: 375px) {
    .section {
        padding: 3em 2%;
    }
}