@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100&family=Lato:ital,wght@0,300;0,900;1,700&family=Oswald:wght@200;300;600&display=swap');

body{  font-family: Arial, Helvetica, sans-serif;
    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; 
    padding: 0 0 30 0;
}


figcaption{ color: #fff;
    align-self: center;
    text-align: center;} 
figure img{ width: 100%;}


section{
    display: grid;
    grid-template-columns: 20% 20% 60%;

}
h1{ color: #00450e; font-size: 2rem; font-weight: 300;}
h2{ color: #00450e; font-size: 1.5rem; font-weight: 300;}


footer{ width: 100%; min-height: 10rem;
 background: 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) {
    section{grid-template-columns: 1fr;}
    figure{ grid-template-columns: 1fr;}

}