.pagination>li {
    display: inline
}

.pagination>li>a,.pagination>li>span {
    position: relative;
    padding: 6px 12px;
    line-height: 1.42857;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-left: -1px
}

.pagination>li:first-child>a,.pagination>li:first-child>span {
    margin-left: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px
}

.pagination>li:last-child>a,.pagination>li:last-child>span {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px
}

.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover {
    z-index: 2;
    color: #fff;
    background-color: #2563eb;
    border-color: #2563eb
}

.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover {
    z-index: 3;
    color: #fff;
    background-color: #2563eb;
    border-color: #2563eb;
    cursor: default
}

@media (max-width: 768px) {
    .grid {
        display: grid !important;
    }

    .gap-6 {
        gap: 1.5rem !important;
    }
 
    .gap-8 {
        gap: 2rem !important;
    }
     
    .grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
     
}