/* article */

.article-wrapper {
    position: sticky;
    z-index: 100;

    width: 95%;
    /* min-height: 100vh; */

    margin: 9vh auto 3vh auto;
    padding: 10vh 2vw;

    background-color: rgba(255,255,255,0.7);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

/* @media (min-width: 1024px) {
    .article-wrapper {
        margin: 0 auto 98vh auto;
    }
} */

.article-wrapper.welcome {
    /* margin-block: 2vh; */
    /* transform: rotate(-1deg);
    flex: 1; */
    width: fit-content;
}

article {
    width: 95%;
    max-width: 1024px;
    margin: 0 auto;

    display: grid;
    grid-template-areas:
        'headline'
        'byline'
        'body'
        'aside';

    font-size: 200%;
}

article > * {
    margin: 1rem 0;
    padding: 1rem 2rem;
}

@media (min-width: 768px) {
    .article-wrapper.welcome {
        transform: rotate(-1deg);
        transition: all 400ms ease-in-out;
    }
    .article-wrapper.welcome article {
        transform: rotate(1deg);
        transition: all 400ms ease-in-out;
    }
}

@media (min-width: 1024px) {

    .article-wrapper {
        width: 60%;
    }

    .article-wrapper:has(aside) {
        width: 95%;
    }

    article:has(aside) {
        display: grid;
        grid-template-columns: auto 300px;
        grid-template-areas:'headline headline'
                            'byline byline'
                            'body aside';
    }
}

@media (min-width: 1280px) {
    article:has(aside) {
        max-width: 1600px;
        grid-template-columns: 300px auto 300px;
        grid-template-areas:'rail headline headline'
                            'rail byline byline'
                            'rail body aside';
    }
}

article .rail {
    grid-area: rail;
}

article h1 {
    grid-area: headline;
    font-size: 200%;
}

article cite {
    grid-area: byline;
}

article section {
    grid-area: body;
    line-height: 1.8;
}

article aside {
    grid-area: aside;
    line-height: 1.8;
}

article section p {
    margin: 0 0 2rem;
}

article img {
    display: block;
    max-width: 100%;
    height: auto;
}