main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

main .content {
    display: flex;
    align-items: start;
    padding: 50px 0;
    width: 1200px;
    max-width: 90%;
    gap: 30px;

    @media screen and (max-width: 1024px) {
        flex-direction: column;
    }
}

main .content .post {
    flex: 2 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;

    .post-image {
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
        border-radius: 6px;
    }

    .post-author {
        font-size: 13px;
        color: var(--coffee);
        display: flex;
        align-items: center;
        gap: 4px;

        svg {
            height: 13px;
            fill: var(--coffee);
        }
    }

    /* Formatting */
    h1, h2, h3, h4, h5, h6 {
        color: var(--olive);
        font-family: Castoro;
    }

    h1 {font-size: 32px;}
    h2 {font-size: 24px;}
    h3 {font-size: 21px;}
    h4 {font-size: 19px;}
    h5 {font-size: 17px;}
    h6 {font-size: 15px;}

    p, ul, ul *, a {
        color: var(--coffee);
        font-size: 15px;
        font-family: Poppins;
        line-height: 26px;
    }

    a {
        color: var(--olive) !important;
        text-decoration: underline;
    }
}

main .content aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1 0 0;

    .aside-item {
        flex: 1 0 0;
        background-color: #f6f5ec;
        padding: 30px;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        gap: 20px;

        h3 {
            font-size: 22px;
            font-family: Castoro;
            color: var(--olive)
        }
    }
}