mediaqueries.css

@media screen and (min-width: 1330px){
    body {
        main {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
        }
    }

}


@media screen and (min-width: 1105px) and (max-width: 1720px) {
    body {
        main {
            margin: 30px 450px 200px 450px;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: center;
        }
    }
}


@media screen and (min-width: 620px) {
    body {
        main {
            margin: 30px 100px 200px 100px;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: center;
            margin-bottom: 4rem;
        }
    }
}


@media screen and (max-width: 620px ) {

    body {
        figure {
            overflow: hidden;
            width: 150px;
            height: 150px;
            border-radius: 70%;
            margin: 3.7rem auto 0 auto
        }

        h1 {
            margin: 30px 0 0 0;
            font-size: 30px;
        }

        h2 {
            margin: 0;
            font-size: 14px;
            font-weight: 400;
        }

        main {
            margin-bottom: 4rem;
        }

    }

    footer {
        position: relative;
        height: 40px;
        bottom: 30px;
    }
}