my-portfolio/src/blog/css/main.css

/******** Imports *******/
@import "/node_modules/normalize.css/normalize.css";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Share+Tech+Mono&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap");
/*local imports*/
@import "../../css/templateStyles.css";
@import "../../css/nav.css";
@import "../../css/footer.css";
@import "blogPosts.css";
@import "home.css";
@import "category.css";
@import "prism.css";

.policy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 5em;
    padding-bottom: 5em;
}

.policy h3 {
    font-weight: bold;
}

/**** Media Queries *****/

@media screen and (max-width: 90em) {
    
    /***** Individual Blog Posts ***/
    
    div.mainContent {
        width: 80%;
    }

    aside.sideContent {
        width: 20%;
    }

}

@media screen and (max-width: 75em) {

    /***** Menu bar ***/
    div.menuBar .menu ul {
        flex-direction: column;
        align-items: center;
        padding-left: 1.25em;
    }

    div.menuBar .menu ul li input[type="search"] {
        width: 100%;
    }

    /*** Large Post for Home and Category ***/
    section.largePost {
        padding: 1em;
    }

    section.largePost .outerContent {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .banner {
        max-width: 50%;
    }

    section.largePost .outerContent > .content,
    section.largePost .outerContent > img {
        width: 90%;
    }

    /***** Individual Blog Posts ***/
    section#individualPost {
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }

    div.mainContent {
        width: 100%;
        border-right: none;
    }

    aside.sideContent {
        width: 100%;
        flex-direction: row;
        align-items: stretch;
        justify-content: space-around;
        border-bottom: 5px solid var(--mutedGrey);
        flex-wrap: wrap;
    }

    aside.sideContent > div.authorInfo {
        grid-template-columns: 4fr 1fr 1fr 1fr;
        flex-basis: 100%;
    }

    aside.sideContent > div.authorInfo .picture {
        grid-row: span 3;
    }

    div.byLine {
        flex-direction: column;
        align-items: flex-start;
    }

    div.byLine h3:last-child {
        border-left: none;
        padding-left: 0;
    }

    aside.sideContent > div.authorInfo h3 {
        grid-column-start: 2;
        grid-column-end: end;
        grid-row: 3;
    }

    aside.sideContent > div.categories {
        flex-basis: 100%;
    }

    aside.sideContent > div.otherPosts {
        border-bottom: 5px solid var(--mutedGrey);
    }


    div.otherPosts, div.newsletter, div.feeds {
        justify-content: space-between;
        width: 50%;
    }

    aside.sideContent > div {
        border-right: 5px solid var(--mutedGrey);
        flex-basis: 50%;
    }

    aside.sideContent > div:last-child {
        border-right: none;
    }

    /***** Categories and Search Pages ***/
    main > h1 {
        padding-left: 1em;
    }

}

@media screen and (max-width: 55em) {

    /*** Large Post for Home and Category ***/
    .banner {
        max-width: 75%;
    }

    /***** Individual Blog Posts ***/

    aside.sideContent > div.authorInfo {
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    aside.sideContent > div.authorInfo h3 {
        grid-row: 2;
    }

}

@media screen and (max-width: 30em) {

    /***** Individual Blog Posts ***/
    .profile {
        max-width: 50%;
    }

    section#individualPost {
        flex-direction: column;
    }

    aside.sideContent {
        flex-direction: column;
        align-items: center;
        border-bottom: none;
    }

    aside.sideContent > div.authorInfo {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: repeat(3, auto);
        border-top: 5px solid var(--mutedGrey);
    }

    aside.sideContent > div.authorInfo .picture {
        grid-row: 1;
        grid-column: span 3;
    }

    aside.sideContent > div.authorInfo h3 {
        grid-column: span 3;
    }

    div.otherPosts, div.newsletter, div.feeds {
        width: 100%;
    }
}