@import url('https://fonts.googleapis.com/css2? familia= Roboto:wght@500 &family= Six+Caps & display=swap');
header { display: grid;
grid-template-columns: 20% 80%;}
body {font-family:'Roboto', sans-serif; transition: all 3s}


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


figure {display: grid; grid-template-columns: 100%; background-color: rgb(27, 82, 59);}
figure img {width: 100%;}
figure figcaption {color: azure; text-align: center; align-self: center;}


section{display: grid; grid-template-columns: 25% 50%;}
section aside {padding right: 10%;}
h1 {font-family:'Roboto', sans-serif; font-weight: 700; color: rgb(27, 82, 59); font-size: 2rem;}
h2 {font-family:'Roboto', sans-serif; font-weight: 700; color: rgb(27, 82, 59); font-size: 1.5rem;}


footer {
    background:url('img/fresas.webp') ;
    text-align: center; color: azure; font-weight: 900;
    padding: 10rem;
    background-size: cover;
}


@media (max-width: 750px) {
    body {background: rgb(255, 0, 0); }
    header {display: grid; grid-template-columns: 100%;}
    section{display: grid; grid-template-columns: 100%;}
    footer {padding: 10rem; margin: none;}
    figure {display: grid; grid-template-columns: 100%;}
}