@media (min-width :801px) {
    .category-list a:hover {
        background-color: #d6b47c;
    }

    .card > a:hover .arrow::after {
        right: 10px;
    }

    .back:hover {
        background-color: #d9cbb0;
    }
}

@media(max-width: 800px){
    body > p {
        padding: 0 1em;
    }

    .category-list {
        flex-direction: column;
    }

    .category-list a:active {
        background-color: #d6b47c;
    }

    .card {
        width: 90%;
    }

    .card > a:active .arrow::after {
        right: 10px;
    }

    .article-meta {
        flex-direction: column;
    }

    .back:active {
        background-color: #d9cbb0;
    }
    
    .thumbnail-big {
        width: 80%;
    }

    .article-body {
        padding: 1em;
        width: 85%;
    }

    .article-body blockquote {
        margin-left: 1.5em;
    }
}