.blog-cats {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.blog-cats a {
    padding: .4rem .9rem;
    border-radius: 2rem;
    background: #f2f2f2;
    font-size: .9rem;
    text-decoration: none;
    transition: all .2s;
}
.blog-cats a:hover,
.blog-cats .active {
    background: #333;
    color: #fff;
}

.blog-grid {
    display: grid;
    gap: 2rem;
}

.blog-grid.cols-2 { grid-template-columns: repeat(auto-fill, minmax(48%, 1fr)); }
.blog-grid.cols-3 { grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); }
.blog-grid.cols-4 { grid-template-columns: repeat(auto-fill, minmax(22%, 1fr)); }
.blog-grid.cols-5 { grid-template-columns: repeat(auto-fill, minmax(18%, 1fr)); }
.blog-grid.cols-6 { grid-template-columns: repeat(auto-fill, minmax(15%, 1fr)); }

.blog-grid article {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}
.blog-grid .thumb img {
    width: 100%;
    height: auto;
    border-radius: .5rem;
    object-fit: cover;
}
.blog-grid .read-more {
    align-self: flex-start;
    padding: .45rem 1rem;
    background: #0073aa;
    color: #fff;
    border-radius: .35rem;
    font-size: .85rem;
    text-decoration: none;
    transition: background .2s;
}
.blog-grid .read-more:hover {
    background: #005177;
}
.blog-pagination {
    margin-top: 2rem;
    text-align: center;
}
.blog-pagination .page-numbers {
    margin: 0 .25rem;
    padding: .35rem .7rem;
    background: #eee;
    border-radius: .3rem;
}
.blog-pagination .current {
    background: #333;
    color: #fff;
}

@media (max-width: 768px) {
  /* independientemente de la cantidad de columnas declarada
     en desktop, en mobile mostramos 1 */
  .blog-grid,
  .blog-grid.cols-2,
  .blog-grid.cols-3,
  .blog-grid.cols-4,
  .blog-grid.cols-5,
  .blog-grid.cols-6 {
    grid-template-columns: 1fr !important;
	padding: 20px;  
  }
}