/* Main component spacing - To ensure elements are evenly spaced out */
.blog-intro, .blog-post, .blog-img {
    margin: 0 0 1rem 0;
}

/* Scrolling option - To cater for larger amounts of text */
main {
    overflow: scroll;
}
main::-webkit-scrollbar {
    display: none;
}

/* Link to previous page styling - For consistency with other text elements */
.go-back-link {
    text-decoration: none;
    color: var(--font-colour);
    margin: 0 0 1rem 0;
    display: block;
}

/* Image styling and spacing - To ensure it fits on page */
.blog-img {
    padding: 0 0 0 3rem;
}
.blog-img img {
    width: 400px;
    border-radius: 10px;
}

/* Media query - Phone view */
@media screen and (max-width:767px) {
    /* Image is repositioned and resized for better visibility */
    .blog-img img {
        width: 60dvw;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
}