---
---

.back-arrow {
    display: block;
    padding: 0.1em 1.75rem;
    font-size: 4rem;
    line-height: 90%;
    margin-top: -0.22em;
    &:hover {
        color: #D91C1C;
    }
}

.article {
    background: white;
    color: #202020;
    padding: 1.75rem;
    height: auto;
}

.article__header {
    height: auto;
    h1 {
        font-size: 2rem;
        font-weight: bold;
    }
    img {
        margin: 0.75rem 0;
        width: 100%;
        object-fit: cover;
    }
}

.article__content {
    margin-top: 1em;

    h2 {
        font-size: 2rem;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    h3 {
        font-size: 1.6rem;
        margin-bottom: 0.5rem;
    }

    h4 {
        font-size: 1.3rem;
        margin-bottom: 0.5rem;
    }

    p {
        margin-bottom: 0.5rem;
    }

    ul {
        list-style-type: square;
        margin: 0.5rem 0 0.5rem 2rem;
    }
}

@media only screen and (min-width: 768px) {
    main {
        padding: 0 3rem;
    }
    .back-arrow {
        padding: 0.1em 3rem; // To be consitent with main's padding
    }
    .article {
        padding: 3rem;
        .article__header {
            img {
                max-height: 45vw;
            }
            p.article__author {
                font-size: 1.25rem;
            }
        }
    }
}