@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

header {display: grid; grid-template-columns: auto auto; padding: 2rem;}
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: rgb(22, 61, 48);}
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: 'Poppins', sans-serif; font-weight: 800; color: rgb(22, 61, 48); font: 4rem;}

body {font-family: 'Poppins', sans-serif; transition: all 2s;}

footer {background: url("fresas.webp");text-align: center; padding: 4rem; background-size: cover;}
footer p {color: rgb(22, 61, 48); font-size: 1.5rem;font-weight: 500;}

/* RESPONSIVE */

@media (max-width: 40rem) 
{
   body {background: rgb(153, 180, 158)}
   section {display: grid; grid-template-columns: 100%;}
   footer {padding: 1rem}
   figure {display: grid; grid-template-columns: 100%;}
}