/* Article */

.article-page article {
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin: auto;

    padding-top: 2.5rem;
}
@media (max-width: 1080px) {
    .article-page article{
        padding-top: 1.7rem;
    }
}

.article-page article a {
    text-decoration: underline;
}

.article-page article img {
    margin: auto; /* in case image is portrait and doesn't fill full width */
}

/* .article-page article p, */
/* .article-page article img, */
.article-page article iframe {
    width: 100%;
}

.article-page article p {
    margin-top: .7rem;
}

.article-page article iframe {
    aspect-ratio: 16/9;
}

.article-page .title-large{
    text-align: center;
    margin-top: .7rem;
    margin-bottom: 2rem;
}

.article-page article .meta-data {
    order: -1;
    margin: 6rem 0 .5rem;
}

.article-page article .meta-data a {
    display: none;
}

.article-page article .title-small,
.article-page article img,
.article-page article iframe {
    margin-top: 2rem;
}

.article-page article .article-meta {
    order: -1;
    text-align: center;
}

/* Bottom nav */

.article-page .bottom-nav {
    display: flex;
    justify-content: space-between;
    margin: 8rem auto 0;

    max-width: 800px;
}
@media (max-width: 1080px) {
    .article-page .bottom-nav {
        margin-top: 6rem;
    }
}

.article-page .bottom-nav a {
    display: flex;
    align-items: center;
    padding: .5rem 0;
}

.article-page .bottom-nav a.link-next{
    margin-left: auto; /* makes sure the "next" button is on the right even when alone */
}

.article-page .bottom-nav a > *:first-child{
    margin-right: .7rem;
}

.article-page .bottom-nav svg{
    width: 1.5rem;
    height: 1.5rem;
    stroke-width: 3;
    stroke: currentColor;
}