@import url('https://fonts.googleapis.com/css2? family= Amatic+SC:wght@400;700 & family= Bricolage+Grotesque:opsz,wght@10..48,200;10.. 48,300;10..48,600 & mostrar=intercambiar');

body {
    font-family: 'Bricolage Grotesque', sans-serif; font-weight: 300; transition: 2s}

header {
    display: grid; grid-template-columns: auto auto; padding: 2rem}

header nav {
    justify-self: end;}
    header nav ul li {
        display: inline-block;}
        header nav ul li a {
            text-decoration: none; font-family: 'Bricolage Grotesque', sans-serif; color: black}

section {
    display: grid; grid-template-columns: 20% 20% 60%}
figure {
    display: grid; background: rgb(3, 75, 3)}
figcaption {
    color: white; align-self: center; text-align: center}
figure img {
    width: 100%}
h1 {
    color: rgb(3, 75, 3); font-size: 2rem; font-family: 'Bricolage Grotesque', sans-serif}
h2 {
    color: rgb(3, 75, 3); font-size: 1.5rem; font-family: 'Bricolage Grotesque', sans-serif}

footer {
    background: url(../img/fresas.webp); width: 100%; min-height: 10rem; background-size: cover}
footer p {
    color: white; font-size: 1rem; text-align: center; padding: 10rem}

@media (max-width: 40rem) {
    body {
        background-color: red}
    section {
        grid-template-columns: 100%}
    figure {
        grid-template-columns: 100%}
}