GuyDlP Hi
I updated this css code for your site:
/* Featured Blog */
.blog-featured .blog-items {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
}
/* Tablet Screen */
@media screen and (min-width: 768px) {
.blog-featured .blog-items {
grid-template-columns: 1fr 1fr;
}
}
/* Desktop Screen */
@media screen and (min-width: 1200px) {
/* 3 column */
.blog-items.columns-3,
.blog-items.masonry-3 {
grid-template-columns: 1fr 1fr 1fr;
}
/* 4 column */
.blog-items.columns-4,
.blog-items.masonry-4 {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
p.counter {
text-align: center;
}
ul.pagination {
align-items: center;
display: flex;
gap: 8px;
height: auto;
justify-content: center;
flex-wrap: wrap;
margin: 0;
}
ul.pagination li {
list-style-type: none;
padding: 0;
}
ul.pagination li.active.page-item {
}
ul.pagination li.disabled.page-item {
opacity: 0.6;
}
ul.pagination li.page-item > a {
background-color: transparent !important;
}
ul.pagination li.active.page-item > a {
background-color: #c7d345 !important;
font-weight: 600;
}
ul.pagination li.page-item > a:hover,
ul.pagination li.page-item > a:focus,
ul.pagination li.page-item > a:active {
background-color: #c7d345 !important;
color: #fff;
}
ul.pagination li a,
ul.pagination li > span {
border: 1px solid #313131 !important;
color: #636262;
display: inline-block;
padding: 0 20px !important;
border-radius: 100px !important;
}
ul.pagination li a:hover,
ul.pagination li a:focus,
ul.pagination li a:active {
background-color: #f0f0f0;
text-decoration: none;
}
ul.pagination .icon-angle-double-left::before {
display: inline-block;
content: '\f100';
font-family: FontAwesome;
font-weight: 400;
}
ul.pagination .icon-angle-double-right::before {
display: inline-block;
content: '\f101';
font-family: FontAwesome;
font-weight: 400;
}
Kindly check.
