html
{
    margin: 10px 10px;
    padding: 0;
    font-size: 10px;
    text-align: justify;
}
body {
    background-color: #fff;
    color: #333;
    margin: 0;
    padding: 0;
    font-size: 10px;
    text-align: justify;
    font: 1.2em / 1.2 Arial, Helvetica, sans-serif;
}

img {
    max-width: 100%;
    display: block;
}

.logo {
    font-size: 200%;
    padding: 50px 20px;
    margin: 0 auto;
    max-width: 980px;
}

.grid {
    margin: 0 auto;
    padding: 0 20px;
    max-width: 980px;
    
    /* Colocar dos columnas  */
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-gap: 3rem;
}

nav {
    background-color: #000;
    padding: .5em;
    margin-top: 0;

    /* Pego la barra del navegador al bajar */
    position: sticky;  
    top: 0px;
    
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;

    /* Convierto la barra de navegacion en una forma lateral */
    display: flex;
    justify-content: space-between;
}

nav a {
    color: #fff;
    text-decoration: none;
    padding: .5em 1em;
    
}

nav a:link {
    color: #c327a4;
}

nav a:visited {
    color: #fff;
}

nav a:focus {
    border-bottom: 1px solid;
    background: #fff;
    color: #000000;
    block-size: 100%;
}

nav a:hover {
    border-bottom: 1px solid;
    background: #fff;
    color: #000000;
}

nav a:active {
    background: #f8d821;
    color: #000000;

} 

.photos {
    list-style: none;
    margin: 0;
    padding: 0;

    /* Las fotografías deben mostrarse como una cuadrícula de dos columnas con un espacio de 1 píxel entre las imágenes. */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1px;
}

.feature {
    width: 200px;
    /* La imagen que está dentro del artículo debe tener texto alrededor. */
    float: left;
    margin-right: 15px;
    margin-top: .5rem;
    
}


@media screen and (max-width: 40em) {

    nav {
        position: relative;
        padding: 0 0;
        padding-inline-end: 1em;
        padding-block: 0.5em;
        
    }
    nav ul {
        display: flex; /* Usa flexbox para centrar los elementos */
        flex-direction: column; /* Alinea los elementos en columna */
        justify-content: center; /* Centra verticalmente los elementos */
        align-items: center; /* Centra horizontalmente los elementos */
    }
    nav ul li {
        text-align: center; /* Alinea texto */
        width: 100%; /* toma todo el tamaño del bloque */
    }
    nav a {
        color: #fff;
        text-decoration: none;
        padding: auto; 
        width: 100%;
        display: block; 

        
    }

    nav a:hover {
        border-bottom: 0px solid;
        background: #fff;
        color: #000000;
    }

    .grid {
        display: block;
    }

    .feature {
        width: 200px;
        /* La imagen que está dentro del artículo debe tener texto alrededor. */
        float: none;
        margin: auto;
        background-color: aqua;
        
    }

}

.footer {
    font-size: 14px;
    background-color: #1f1f24;
    padding: 50px 0;
    color: rgba(255, 255, 255, 0.7);
}