body{  
    font-family: Roboto; 
    font-weight: 300;
    padding: 0; 
    margin: 0; 
    transition: all 2s; }
header{
    display: grid;
    grid-template-columns: auto auto;
    padding: 2rem;
}

header nav{
    justify-self: end;
}
header nav ul li{ 
    display: inline-block;
}
header nav ul li a{ 
    text-decoration: none; 
    color: #000;
}
figure{ 
    display: grid;
    background: #00450e; 
    grid-template-columns: 50% 50%;
}
figcaption{ 
    color: #fff; 
    align-self: center; 
    text-align: center;
} 
figure img{ 
    width: 100%;
}
section{
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 2%;
    padding: 2%;
}
h1{ 
    color: #00450e; 
    font-size: 2rem; 
    font-weight: 700;
}
h2{ 
    color: #00450e; 
    font-size: 1.5rem; 
    font-weight: 700;
}
footer{ 
    width: 100%; min-height: 20rem;
    background-image: url(../img/fresas.webp);
    background-size: cover;
}
footer p{
    color: #fff; 
    font-size: 1rem; 
    font-weight: 700; 
    text-align: center; 
    padding: 10rem;
}
@media (max-width:500px) {
    body{background: red;}
    section{grid-template-columns: 1fr;}
    figure{ grid-template-columns: 1fr;
    }

}