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

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-row: 15% 15%;background: rgb(4, 60, 4)}
figure img {width: 15%;}
figure figcaption{color: white; text-align: left; align-self: left;}

section{ display: grid; grid-template-columns: 30% 70%;}
h1{ font-family: 'Roboto', sans-serif ; font-weight: 700; color: rgb(4, 60, 4) ; font-size: 2rem}
h2{ font-family: 'Roboto', sans-serif ; font-weight: 700; color: rgb(4, 60, 4) ; font-weight: 1.5rem}



footer{
    background: url("img/fresas.webp");
    text-align: center
    }




/* Responsive */   
@media {max-width: 40rem;}
    section{ display: grid; grid-template-columns: 100%;}
    footer{padding: 1rem;}

}