body {
    margin: 0;
    padding: 0;
    background: conic-gradient(from 90deg at 1px 1px,#0000 90deg,rgba(128,128,128,0.7) 0) 
    0 0/25px 25px,linear-gradient(brown 20%, red);
}

h1 {
    color: red
}

header {
    width: 40vw;
    margin: 0 auto;
}

header section {
    margin: 1rem;
}

main {
    background: white;
    width: 40vw;
    margin: 0 auto 15vh;
    border: 2px solid grey;
}

figure img, p img {
    max-width: 100%;
}

nav#home {
    width: 100vw;
    background-color: grey;
    padding: 0.2rem 1rem;
}

nav#home a {
    color: blue;
}

#grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#grid section {
    margin: 1rem;
    display: grid;
    grid-template-rows: 1fr 3fr;
}

#grid ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#grid ul li {
    margin: 0;
    padding: 0;
    width: 20rem;
    height: 8rem;
    background: blue;
    display: inline-block;
    transition: transform 0.25s;
}

#grid li:hover {
    transform: scale(1.1);
    background-color: light-blue;
    z-index: 2;
}

@media screen and (width < 80rem) {
    main {
        width: 90vw;
    }

    #grid {
        grid-template-columns: 1fr;
    }

    #grid div {
        margin: 0;
    }
}