@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&display=swap');
body{font-family: 'Roboto', sans-serif; transition: all 2s;}
header{display: grid;
grid-template-columns: 50% 50%;}

header nav { align-self: self-end;}
header nav ul { text-align: right;}
header nav ul li { display: inline-block;}
header nav ul li a { color: black; text-decoration: none;}

figure { display: grid; grid-template-columns: 50% 50%; background-color: rgb(0, 101, 0);}
figure img { width: 100%;}
figure figcaption { color: white; text-align: center; align-self: center;}

section { display: grid; grid-template-columns: 20% 80%;}
section aside { padding: 2%;}
h1 {font-family: 'Roboto', sans-serif; font-weight: 700; color: rgb(0, 101, 0); font-size: 2rem;}
h2 {font-family: 'Roboto', sans-serif; font-weight: 700; color: rgb(0, 101, 0); font-size: 1.5rem;}

footer { 
    background: url("img/fresas.webp");
    text-align: center;
    padding: 5rem;
    background-size: cover;}


@media (max-width: 40rem)  {
    section { display: grid; grid-template-columns: 100%;}
    footer {padding: 1rem;}
    figure { display: grid; grid-template-columns: 100%;}
}