.blog-content-container {
    display: flex;
    gap: 2.5em
}

    .blog-content-container .blog-content {
        flex-basis: 70%;
        overflow-wrap: anywhere; /*to handle long links*/

        width: 100%;
        max-width: 48rem;
        margin-left: auto;
        margin-right: auto;
    }

    .blog-content-container .blog-content *:first-child {
        margin-top: 0;
    }

        .blog-content-container .blog-content a {
            color: var(--accentColour);
            text-decoration: underline;
        }

            .blog-content-container .blog-content a:hover {
                filter: brightness(110%);
            }

    .blog-content-container .blog-side-bar {
        flex-basis: 30%;
        position: sticky;
        top: 1.75em;
        align-self: flex-start; /*Without this, the height will be the same as the entire container and so sticky won't have the desired effect, more info here: https://stackoverflow.com/questions/44446671/my-position-sticky-element-isnt-sticky-when-using-flexbox*/
    }

        .blog-content-container .blog-side-bar h3 {
            font-size: 24px;
            margin-top: 0;
            margin-bottom: 0.5em;
        }

        .blog-content-container .blog-side-bar .side-bar-content {
            padding-right: 10px;
        }

        .blog-content-container .blog-side-bar .side-bar-content *:first-child {
            margin-top: 0;
        }

    .blog-content-container .recent-posts {
        padding: 2rem;
        border-radius: 1rem;
    }

        .blog-content-container .recent-posts ul {
            padding: 0;
            list-style: none;
        }

            .blog-content-container .recent-posts ul svg {
                margin-right: 3px;
                top: 2px;
                position: relative;
                flex: 0 0 7%;
            }            

.blog-content-container .recent-posts li {
    margin-top: 1em;
}

        .blog-content-container .recent-posts .list-item {
            display: flex;
            gap: 3px;
            align-items: baseline;
        }

    .blog-content-container .side-bar-content {
        text-align: center;
    }

.blog-content img {
    max-width: 100%;
    object-fit: cover;
}

@media (max-width: 850px){
    .blog-content-container {
        flex-direction: column-reverse !important;
    }

    .blog-content-container .blog-side-bar {
        margin: 0 auto;
    }
}