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


header{display: grid;
grid-template-columns: auto auto;}
body{font-family: 'Roboto', sans-serif; transition: all 2s;}
header nav{ align-self: self-end}
header nav ul{ text-align:right;}
header nav ul li{ display: inline-block;}
header nav ul a{color: black; text-decoration: none;}


figure {
    display: grid;
    grid-template-columns: 50% 50%;
    background: rgb(9, 99, 9);
    align-content: center;
    justify-content: center;
    margin: 4rem;
    flex: 4; /* Hace que la figura ocupe todo el ancho disponible */
    margin-right: 20px; /* Agrega margen entre la figura y el aside */
    width: 200px; /* Ancho deseado */
    height: 150; /* Altura automática para mantener la proporción */

}
figcaption{color: darkgreen;}
figure figcaption{color: #ffff;text-align: center; align-self: center;}
figure img{width:65%;}
h1{font-family:'Roboto', sans-serif;font-weight: 700;color:rgb(9, 99, 9) ;font-size: 2rem;
    margin-top: 20px}
h2{font-family:'Roboto', sans-serif;font-weight: 700;color:rgb(9, 99, 9) ;font-size: 1.5rem;}
footer{
    background: url(img/fresas.webp);
    text-align: center;
    padding: 5rem;
    color:#ffff;
    font-family:'Roboto', sans-serif;font-weight: 700;
    background-size: cover;
}
section {
    display: flex;
    align-items: center; /* Alinea verticalmente el contenido */
    justify-content: flex-start; /* Alinea horizontalmente el contenido a la izquierda */
    display: flex; /* Utiliza flexbox para alinear elementos horizontalmente */
    align-items: center
}
section ol li{margin: 0rem;}

aside {
    flex: 1; /* Hace que el aside ocupe el doble de ancho que la figura */
    
}


ul {
    list-style-type: none; /* Quita los puntos de lista */
    padding: 0; /* Elimina el relleno predeterminado de la lista */
    margin: 0; /* Elimina el margen predeterminado de la lista */
}
@media(max-width: 40rem){
    figure {
        display: grid;
        grid-template-columns: 150px;
        
    
    }
}