@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&display=swap');

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; 
}

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: 700;
}

h2{ color: #00450e; font-size: 1.5rem; font-weight: 700;
}

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) {
    body{background: red;}
    section{grid-template-columns: 1fr;}
    figure{ grid-template-columns: 1fr;}
}