p {
    margin-bottom: 10%;
}

.grid > * {
    background-color: #4D7298;
    border: 2px solid #77A6B6;
    border-radius: .5em;
    color: #fff;
    padding: .5em;
  }

@media screen and (min-width: 500px) {
.grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: 
    "title  title title"
    "sidebarL main sidebarR"
    "footer footer footer";
}

.header {
    grid-area: title;
}
.main {
    grid-area: main;
}
.sidebarL {
    grid-area: sidebarL;
}
.sidebarR {
    grid-area: sidebarR;
}
.footer {
    grid-area: footer;
}

img {
    width: 65%;
    margin-left: 45%;
    margin-top: -25%;
}

.h1one {
    margin-right: 35%;
    margin-left: 0%;
    font-size: 300%;
}
}

@media screen and (max-width: 500px) {
    .grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: 
        "title"
        "sidebarR"
        " main"
        "sidebarL"
        "footer";
    }
    
    .header {
        grid-area: title;
    }
    .main {
        grid-area: main;
    }
    .sidebarL {
        grid-area: sidebarL;
    }
    .sidebarR {
        grid-area: sidebarR;
    }
    .footer {
        grid-area: footer;
    }

    img {
        width: 30%;
        margin-left: 60%;
        margin-top: -25%;
    }

    .h1one {
        margin-right: 45%;
        margin-left: 0%;
        font-size: 150%;
    }
    }

    @media screen and (min-width: 800px) {
        img {
            width: 65%;
            margin-left: 45%;
            margin-top: -20%;
        }
    }
    @media screen and (min-width: 3840px) {
        img {
            width: 50%;
            margin-left: 20%;
            margin-top: -65%;
        }
        .h1one {
            margin-right: 67%;
            margin-left: 5%;
            font-size: 1000%;
        }
        p  {
            font-size: 150%;
        };
    }