.blog {
    width: 90%;
    margin-inline: auto;
}
.articles {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.pages {
    height: 6rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
.page-back button, .page-forward button {
    width: 4rem;
    height: 2rem;
    box-shadow: 0 0 0.5rem var(--subtle-color);
    background-color: white;
    border: none;
    border-radius: 5px;
    &:hover{
        box-shadow: 0 0 0.5rem var(--subtle-color-darker);;
    }
}
.page-forward {
    grid-column: 2/3;
    justify-self: right;
}

@media screen and (max-width: 992px) {
    .blog {
        width: 70%;
    }
    .articles {
        grid-template-columns: 1fr;
    }
}
@media screen and (max-width: 576px) {
    .blog {
        width: 80%;
    }
}