@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&display=swap');

body{
    font-family: 'Roboto', sans-serif;
}


header{ 
    display: grid;
    grid-template-columns: auto auto;
}

header nav {align-self: self-end;}

header nav ul {
    text-align: right;
    padding-right: 2rem;
}

header nav ul li { 
    display: inline-block;
}

header nav ul li a {
    color: black;
    text-decoration: none;
}

h1{
    color: rgb(1,71,1);
    font-weight: 700;
    font-size: 2rem;
}

h2{
    color: rgb(1,71,1);
    font-weight: 700;
    font-size: 1.5rem;
}

section {
    margin-top: 2.5rem;
    margin-bottom: 3.5rem;
    display: grid;
    grid-template-columns: 30% 70%;
}

section aside {
    padding: 5%;
}

.elgourmet{
    padding: 1.6rem;
}

figure {
    display: grid; 
    grid-template-columns: 50% 50%;
    background-color: rgb(1,71,1);
}

figure img { width: 100%;}

figure figcaption{
    color: #fff; 
    text-align: center;
    align-self: center ;
}

footer {
    background: url(img/fresas.webp);
    text-align: center;
    font-weight: bold;
    padding: 4rem;
    background-size: cover;
    margin-bottom: 6rem;
    color: #fff;
}


@media (max-width:40rem){
body {background: red;}
section{
    display: grid;
    grid-template-columns: 100%;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
figure {display: grid;
    grid-template-columns: 100%;
}
footer {
    margin-bottom:2rem;
}
}