/***********************
* Les revues de presse *
***********************/

.main{
    padding: 4rem 10%;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
}

/* Responsive desktop */
@media screen and ( min-width:1300px ) {
    .main{
        margin-top: 10vh;
        position: relative;
    }
    .main::before{
        position: absolute;
        content: url(../images/medaille-rose.svg);
        right: 3rem;
        top: 2rem;
    }
}

/* revues */
.revues{
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    justify-content: center;
    padding-top: 2rem;
}

/* revue */
.revue{
    position: relative;
    width: 20rem;
    box-shadow: var(--ombre1);
    background-color: var(--blanc);
    padding: 2rem;
    height: 15rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: 5rem;
}
.revue__titre{
    color: var(--bleu-fonce);
    font-size: 1.25rem;
    text-align: center;
    padding-bottom: .5rem;
}
.revue .btn{
    position: absolute;
    left: 2rem;
    bottom: 2rem;
}
.revue .download{
    position: absolute;
    right: 2rem;
    bottom: 2rem;
}

@media screen and ( min-width:840px ) {
    .revue{
        max-width: 20rem;
    }
}
/* Responsive desktop */
@media screen and ( min-width:1100px ) {
    .revue{
        max-width: initial;
        width: calc(33% - 4rem);
    }
}


/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4rem;
}
.pagination .page-numbers:not(.next, .prev) {
    padding: 0.5rem .75rem;
    margin: 0 0.25rem;
    color: var(--rose);
    text-decoration: none;
    border-radius: 3px;
    border: 1px solid var(--rose);
}
.pagination .page-numbers:not(.next, .prev):hover {
    background-color: var(--rose);
    color: var(--blanc);
}
.pagination .page-numbers:not(.next, .prev).current{
    background-color: var(--rose);
    color: var(--blanc);
}
.pagination .prev,
.pagination .next {
    color: var(--gris);
    margin: 0 0.5rem;
}
/* Responsive desktop */
@media screen and ( min-width:1100px ) {
    .pagination .page-numbers:not(.next, .prev)  {
        margin: 0 0.5rem;
    }
    .pagination .prev,
    .pagination .next {
        margin: 0 1rem;
    }
}