.blog-listing-wrapper{
    max-width:1280px;
    align-items: center;
    display: flex;
    gap: 6rem;
    justify-content: space-between;
    margin: 2rem auto;
    flex-wrap: wrap;
    flex-direction: column;
    
}
@media screen and (min-width:768px){
    .blog-listing-wrapper{
        flex-direction: row;
        align-items: flex-start;
        margin:6rem auto;
    }
}
@media screen and (max-width:767px){
    .hero.image{
        padding-top:200px;
    }
}


.blog-pagination {
    max-width: 1200px;
    margin: 0 auto;
    text-align:center;
    padding: 4rem 3rem;
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:center;
    gap: 1rem;
}

.blog-pagination .blog-pagination__link{
    min-width:3rem;
    height:3rem;
    padding:.75rem;
    border-radius: 1rem;
    text-decoration: none;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: .5rem;
    align-items: center;
    -webkit-transition: all 0.26s ease-in-out;
       -moz-transition: all 0.26s ease-in-out;
         -o-transition: all 0.26s ease-in-out;
            transition: all 0.26s ease-in-out;
}

.blog-pagination__link--active{
    background-color: linear-gradient(to left, rgba(20, 220, 200, 1), rgba(15, 128, 170, 1));
    color: #f9f9f9;
}

.blog-pagination__next-link, 
.blog-pagination__prev-link{
    background: linear-gradient(to left, rgba(20, 220, 200, 1), rgba(15, 128, 170, 1));
    color: #f9f9f9;
    border: ;
}
.blog-pagination__next-link svg, 
.blog-pagination__prev-link svg{
    fill:#f9f9f9
}
.blog-pagination__number-link{
    background: #0F80AA;
    color: #DEFAF7
}

.blog-pagination__link--active:hover{
    background-color: ;
    color: #f9f9f9;
}

.blog-pagination__next-link:hover, 
.blog-pagination__prev-link:hover{
    background: ;
    color: #f9f9f9;
    border: ;
}

.blog-pagination__number-link:hover{
    background: #14DCC8;
    color: #DEFAF7
}

.blog-pagination__link--active:focus{
    background-color: ;
    color: #f9f9f9;
}

.blog-pagination__next-link:focus, 
.blog-pagination__prev-link:focus{
    background: ;
    color: #f9f9f9;
    border: border: 2px solid #14DCC8;
;
}

.blog-pagination__number-link:focus{
    background: #0F80AA;
    color: #1e1e1e
}

a[class$="link--disabled"]{
    background: #f9f9f9;
    color: #ccc;
    pointer-events:none;
    cursor:not-allowed;
}
a[class$="link--disabled"] svg{
    fill: #9E9E9E;
}