*{
    font-family: sans-serif;
}

h1, footer{
    text-align: center;
    padding: 32px 0;
}

picture, img{
    display: block;
    width: 100%;
    height: auto;
    margin: 32px auto;
}

picture, picture img{
    max-width: 485px;
}

img{
    width: 100%;
    max-width: 300px;
}

@media screen and (max-width: 699px){
    
    
    img{
        max-width: 500px;
    }
}

@media screen and (min-width: 500px){
    picture, picture img{
        max-width: 768px;
    }
}

@media screen and (min-width: 700px){
    img{
        max-width: 800px;
    }
}

@media screen and (min-width: 800px){
    picture, picture img{
        max-width: 1440px;
    }
}