.pagination {
    display: flex !important;
    justify-content: center !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
    background-color: transparent !important;
    border-radius: 5px !important;
}

.pagination .page-item {
    display: inline-block !important;
    margin: 0 !important;
    font-size: 1.75rem !important;
}

.pagination .page-item .page-link {
    font-size: 1.75rem !important;
    padding: 0.5rem .75rem !important;
    color: gray !important;
    background-color: #fff !important;
    border: 0 !important;
    margin: 0 2px !important;
    font-weight: bold;
}

.pagination .page-item.active .page-link {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #007bff !important;
    font-weight: bolder;
    font-size: 1.75rem !important;
}

.pagination .page-link:hover {
    color: #0056b3 !important;
    background-color: transparent !important;
    border-color: #dee2e6 !important;
    font-size: 1.75rem !important;
}

.pagination .page-item.disabled .page-link {
    color: gray !important;
    background-color: transparent !important;
    border-color: 0 !important;
    font-size: 1.75rem !important;
}

.pagination .page-link:focus {
    box-shadow: none !important;
    font-size: 1.75rem !important;
}

.pagination .page-link[aria-label="« Previous"],
.pagination .page-link[aria-label="Next »"] {
    color: #007bff !important;
    font-size: 2.5rem !important;
    margin: 0 !important;
    padding: 0 1rem !important;
}

@media (max-width: 768px) {
    .pagination {
        gap: 6px !important;
    }

    .pagination .page-item {
        display: none !important;
    }

    .pagination .page-item:first-child,
    .pagination .page-item:last-child {
        display: block !important;
    }

    .pagination .page-item.active {
        display: block !important;
    }

    .pagination .page-item.active~.page-item:nth-child(1) {
        display: block !important;
    }

    .pagination .page-item.active+.page-item {
        display: block !important;
    }

    .pagination .page-item.active~.page-item:nth-child(2):not(:first-child) {
        display: block !important;
    }

    .pagination .page-item.active+.page-item+.page-item:not(:last-child) {
        display: block !important;
    }
}