@charset "UTF-8";

@media screen and (width >= 992px) {
    body {
        display: grid;
        justify-content: center;
        align-content: center;
    }

    #container {
        max-width: 900px;
        max-height: 700px;
        overflow: hidden;
        padding: 1rem;
        grid-auto-columns: 1fr;
        grid-auto-rows: 1fr;
        row-gap: unset;
        gap: 1rem;
        grid-template-areas: 
        "box1 box2 box2 box3"
        "box1 box2 box2 box3"
        "box1 box2 box2 box3"
        "box1 box2 box2 box3"
        "box1 box5 box6 box3"
        "box4 box5 box6 box3"
        "box4 box5 box6 box3"
        "box4 box7 box8 box8"
        "box4 box7 box8 box8"
        "box4 box7 box8 box8";
    }

    #container > div {
        display: none;
    }

    #container > article {
        max-height: 100%;
        overflow: hidden;
        margin: unset;
        max-width: unset;
    }

    #create-and-schedule {
        grid-area: box1;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    #create-and-schedule > h3 {
        font-weight: 500;
        padding-bottom: 25px;
        letter-spacing: -2px;
        padding: 5px 0px 20px 0px;
    }

    #create {
        height: 80px;
        width: unset;
        margin: unset;
    }

    #reviews {
        grid-area: box2;
        padding: 30px 0px;
    }

    #reviews > h2 {
        position: relative;
        top: 10px;
        line-height: 45px;
        padding: 10px 30px 0px 30px;
        font-size: 2.7em;
    }

    #reviews > #stars {
        padding-top: 25px;
        height: 25px;
    }

    #reviews > p {
        font-weight: 300;
        font-size: 15px;
    }

    #optimize {
        grid-area: box3;
    }

    #optimize > p {
        font-size: 16px;
        text-align: left;
        padding: 15px 0px 5px 5px;
    }

    #schedule-graphic {
        height: 250px;
        position: relative;
        left: 15px;
        border-radius: 10px 0px 0px 10px;
        background-position: left center;
    }

    #write-with-ai {
        grid-area: box4;
    }

    #write-with-ai > h3 {
        letter-spacing: -2.5px;
        font-weight: 500;
        width: 80%;
    }

    #ai-example {
        width: 100%;
        background-size: contain;
    }

    #multipleAccounts {
        grid-area: box5;
    }

    #platformsImage {
        background-size: cover;
        background-position: left center;
        border-radius: 0;
        position: relative;
        left: 15px;
        }

    #posting-schedule {
        grid-area: box6;
    }

    #posting-schedule > h3 {
        font-weight: 500;
        font-size: 1.3em;
        line-height: 20px;
    }

    #p-schedule {
        width: 100%;
    }

    #audience-growth {
        grid-area: box7;
    }

    #audience-growth > h2 {
        font-weight: 500;
        font-size: 2.5em;
    }

    #audience-growth > p {
        font-size: 14px;
    }

    #faces {
        width: 80%;
        margin-top: 20px;
    }

    article#non-stop-content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 
        "graphic title";
        align-items: center;
        grid-area: box8;
    }

    #non-stop-content > h3{
        width: 100%;
        font-size: 1.6em;
        text-align: left;
        padding: 0;
        grid-area: title;
    }

    #followers-graphic {
        margin: unset;
        height: 160px;
        width: 100%;
        grid-area: graphic;
        background-position: left left;
    }
}