HAGA LO QUE HICIMOS: ADAPTANDO LOS ELEMENTOS | HTML y CSS: trabajando con responsividad y publicación de proyectos | Alura Latam

Adaptando imágenes para diferentes tamaños de pantalla

.presentacion__imagen{
    width: 50%;
}

Ajustando el diseño para diferentes dispositivos

.presentacion__contenido{
        width: auto;
    }

Responsividad del contenido de texto

.presentacion__contenido{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

Mejorando la responsividad de los enlaces de navegación

.presentacion__enalces__link{
    /* background-color: #22D4FD; */ /* Código comentado */
    width: 50%;
    text-align: center;
    border-radius: 8px;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: var(--color-terciario);
    font-family: var(--fuente-montserrat);
    border: 2px solid #22D4FD;
    display: flex;
    justify-content: center;
    gap: 10px;
}

Hola Daniela, espero que estés bien

Gracias por compartir tu código y tus dudas sobre responsividad. Vamos a revisarlo paso a paso:

Adaptando imágenes para diferentes tamaños de pantalla:
Parece que ya has definido el ancho de las imágenes como el 50% del elemento padre, lo cual es un buen comienzo. Asegúrate de que el contenedor padre tenga un ancho definido para que el 50% se calcule correctamente. También puedes considerar usar max-width: 100%; para evitar que las imágenes se desborden del contenedor en pantallas más pequeñas.
```
.presentacion__imagen {
    width: 50%;
    max-width: 100%;
}
```
Ajustando el diseño para diferentes dispositivos:
El uso de width: auto; es útil, pero también puedes considerar el uso de media queries para ajustar el diseño en diferentes tamaños de pantalla. Por ejemplo:
```
@media (max-width: 768px) {
    .presentacion__contenido {
        width: 100%;
        padding: 10px;
    }
}
```
Responsividad del contenido de texto:
Ya tienes un buen enfoque con display: flex; y flex-direction: column;. Asegúrate de que el contenedor padre también esté adaptado para diferentes tamaños de pantalla. Puedes usar media queries para ajustar el gap o el width si es necesario.
Mejorando la responsividad de los enlaces de navegación:
Parece que ya has configurado el ancho de los enlaces al 50%, lo cual es un buen inicio. Asegúrate de que el contenedor de los enlaces también esté configurado para adaptarse a diferentes tamaños de pantalla. Además, verifica que no haya conflictos con otros estilos que puedan afectar la responsividad.
```
@media (max-width: 600px) {
    .presentacion__enalces__link {
        width: 100%;
        padding: 15px 0;
    }
}
```

Espero que estas sugerencias te ayuden a mejorar la responsividad de tu proyecto. ¡Bons estudios!