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

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

header{
    display: grid;
    grid-template-columns: 20% auto;
padding:0.5rem;}
    
/*Header*/
header nav {align-self: self-end; text-decoration: none;}
header nav ul {text-align: right;}
header nav ul li{display: inline-block;}
header nav ul li a{color: black; text-decoration: none;}

h1{ font-family: 'Roboto', sans-serif; font-weight: 700; color: rgb(1, 71, 1); font-size: 2rem}

h2{ font-family: 'Roboto', sans-serif; font-weight: 700; color: rgb(1, 71, 1); font-size: 1.5rem;}

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

figure img{ width: 100%;}

figure figcaption{ color: #fff;
    text-align: center;
    align-self: center;
    font-weight:300;
    font-size:1rem;
    padding:1rem;  }

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

footer{
        background: url('img/fresas.webp');
        display: block;
        width: 100%;
        min-height:10rem;
        padding: 0.5rem;
        background-size: cover;
        
    }

footer p {
        color:#ffffff;
        font-size: 1rem;
        font-weight:500;
        text-align: center;
        padding: 3rem;
    }
    
@media (max-width: 40rem)

{section{ display: grid; grid-template-columns: 100%;}
figure{display: grid; grid-template-columns: 100%;}
figure figcaption {padding: 2rem;}
figure img{ width: 100%;}
aside {padding-left: 3rem;}
footer{ padding: 1rem;}
figure{ display: grid;} }