body {
    font-family: Roboto;
    font-weight: 300;
    padding: 0;
    margin: 0;
}


header {
    display: grid;
    grid-template-columns: auto auto;
    margin-bottom: 1cm;
}

header img {
    margin-top: 30px;
    margin-left: 30px;
    display: flex;
    display: inline-block;
}

header nav {
    justify-self: end;
    display: inline-block;
    margin-top: 1cm;
    margin-right: 0.8cm;
}

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

header nav ul li {
    list-style-type: none;
    display: inline-block;
}

section {
    display: grid;
    grid-template-columns: 20% 60% 20%;
}

section figure img {
    width: 100%
}


section figure {
    display: grid;
    background: #00450e;
}

section figure {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
}

section figure figcaption {
    background-color:  rgb(4, 75, 47) ;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: white;
    text-align: center;
    max-width: 20rem;
}

section article h1 {
    font-family: 'Roboto', sans-serif;
    font-size:xx-large;
    font-weight: 500;
    color:  rgb(4, 75, 47);
}

section aside h2 {
    font-family: 'Roboto', sans-serif;
    color:  rgb(4, 75, 47);
    font-weight: 500;
}

section article ol li {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color:  rgb(4, 75, 47);
}

section aside ul li {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color:  rgb(4, 75, 47);
}

footer {
    display: block;
    width: 100%;
    min-height: 10rem;
    background: url('../img/fresas.webp');
    background-size: cover;
}
footer p {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    padding: 4rem;
}


@media (max-width:40rem) {
    section {display: grid; grid-template-columns: 100%;}
    footer {padding: 1rem;}
    figure {display: grid; grid-template-columns: 100%;}
}