*{box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;}
body{max-width: 1200px;
    margin:auto;
    background-color: lightblue;
}
figure{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
figure img{
    max-width: 505px;
}
#wrapper{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: nowrap;
}
.zona{
    margin-left: 5px;
    margin-right: 5px;
    width: 24%;
}
.zona h3{padding:5px}
#utolso{
    width: 98%;
    margin: auto;
    background-color: red;
    color: white;
    padding: 10px 20px;
}

@media (max-width: 992px){
    #wrapper{flex-wrap: wrap;}
    .zona{width: 47%;}
}
@media (max-width: 576px){
    #wrapper{flex-direction: column;}
 #wrapper .zona{width: 95%;}
}
h1,h2{width: 100%; background-color: darkslategray; color: white;}

.zona:first-child h3{
    background-color: dodgerblue;
    color: white;
}
.zona:nth-child(2) h3{
    background-color: orange;
    color: black;
}
.zona:nth-child(3) h3{
    background-color: forestgreen;
    color: black;
}
.zona:nth-child(4) h3{
    background-color: red;
    color: white;
}