@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&display=swap');
body {font-family: 'Roboto', sans-serif;
margin-left: 1.5rem;
transition: all 2s;}

header{display: grid; grid-template-columns: 90% 10%; margin-bottom: 5rem;}

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

section{display: grid; grid-template-columns: 25% 75%;}
article{margin: 1.5rem;}
figure{display: grid; grid-template-columns: 50% 50%;background-color: rgb(0, 75, 0); }
figure img{width: 100%;}
figure figcaption{    align-self: center; color: white;
text-align: center;
}
h1{font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 2rem; color: rgb(0, 75, 0);}
h2{font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 1.5rem; color: rgb(0, 75, 0);}



footer{
background: url('../img/fresas.webp');
color: white;
padding: 4rem;}
footer p {text-align: center; font-weight: 700;}


@media (max-width: 40rem) {
  body{background-color: red;}
section{display: grid; grid-template-columns: 100%;}; 
header{display: grid; grid-template-columns: auto auto; margin-bottom: 2rem; margin-right: 0.5rem;}

head 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(0, 75, 0); }
figure img{width: 100%;}
figure figcaption{    align-self: center; color: white;
text-align: center;
}
footer{
    background: url('../img/fresas.webp');
    color: white;
    padding: 1rem;}
    footer p {text-align: center; font-weight: 700;}}