.container {
    margin: 0 20rem;
    max-width: 70rem;
    text-align: center;
}

.verde {
   border: 4px solid green;
}

.rojo {
    border: 4px solid red;
}

h1, h2, h3 {
    font-family: 'Playfair Display', serif;
}

.cambio-heigth {
    height: 8rem;
}
@media (min-width: 768px) {
    .ancho {
        min-width: 425px;
    } 
}

.hero {
    background-image: url(../img/image\(1\).jpg);
    height: 15rem;
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

@media (min-width: 768px) {
    .hero {
        height: 25rem;
    }
}