@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: #026516;grid-template-columns: 80% 20% ;}
figcaption{ color: #fff; align-self: center; text-align: center;} 
figure img{ width: 50%;}


section{
    display: grid;grid-template-columns: 80% 20% ;padding: 2%;}

aside{ 
    align-self: center;}
h1{ color: #026516; font-size: 2rem; font-weight: 700;}
h2{ color: #026516; 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: 5rem;}

@media (max-width:500px) {body{background: rgb(250, 248, 248);}
    section{grid-template-columns: 1fr;}
    figure{ grid-template-columns: 1fr;}}