@media (min-width: 960px){
    .pagination-fragment{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .pagination-fragment div{
        cursor: pointer;
    }
    .back, .next{
        border: 1px solid;
        padding: 10px 20px;
        border-radius: 20px;
        background-color: #21366B;
        color: white;
    }
    .back{margin-right: 3px;}
    .next{margin-left: 3px;}
    .page{
        height: 39px;
        width: 39px;
        color: black;
        border: 1px solid;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 3px;
    }
    .page.current{
        color:white;
        background-color: #21366B;
    }
    .page:hover{
        color: black;
    }
    .page.current:hover{
        color:white;
        background-color: #21366B;
    }
}
@media (min-width: 310px) and (max-width: 959px) {
    .pagination-fragment{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .pagination-fragment div{
        cursor: pointer;
    }
    .back, .next{
        border: 1px solid;
        padding: 10px 20px;
        border-radius: 20px;
        background-color: #21366B;
        color: white;
    }
    .back{margin-right: 3px;}
    .next{margin-left: 3px;}
    .page{
        height: 39px;
        width: 39px;
        color: black;
        border: 1px solid;
        border-radius: 50%;
        display: none;
        margin: 0 3px;
    }
    .page.current{
        display: flex;
        color:white;
        background-color: #21366B;
        align-items: center;
        justify-content: center;
    }
    .page:hover{
        color: black;
    }
    .page.current:hover{
        color:white;
        background-color: #21366B;
    }
}