Tu portfolio se verá en un móvil en el autobús, en el portátil de un estudio y en la pantalla enorme de una agencia. No diseñas una página: diseñas un sistema que se adapta. Eso es el diseño adaptable (responsive design).

1. La etiqueta viewport en el <head> (seguro que ya la tienes): ``html <meta name="viewport" content="width=device-width, initial-scale=1.0"> `` Sin ella, el móvil muestra la página de escritorio en miniatura.
2. Maquetación flexible: fr, %, rem, max-width, Flexbox con flex-wrap, Grid con auto-fit. Nada de anchos fijos grandes en píxeles.
3. Media queries: reglas CSS que solo se aplican a partir de cierto tamaño.

/* Estilos base: móvil (una columna) */
.trabajos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* A partir de 700 px de ancho: dos columnas */
@media (min-width: 700px) {
  .trabajos {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* A partir de 1100 px: tres columnas */
@media (min-width: 1100px) {
  .trabajos {
    grid-template-columns: repeat(3, 1fr);
  }
}

Los valores de cambio (700 px, 1100 px) se llaman puntos de ruptura. No los elijas por modelos de móvil: ponlos donde tu diseño se rompe. Estrecha la ventana poco a poco y, cuando algo se vea mal, ahí va un punto de ruptura.

Escribe primero los estilos para la pantalla pequeña y añade complejidad con min-width. Ventajas:

• El móvil, que es el caso más restrictivo, queda resuelto desde el principio.
• El CSS base es más sencillo; las media queries solo añaden.
• Te obliga a decidir qué es lo importante (lo que va primero en una columna).

img {
  max-width: 100%;    /* nunca más ancha que su contenedor */
  height: auto;       /* mantiene la proporción */
  display: block;
}

Y en HTML, para no hacer descargar una imagen de 4000 px a un móvil:

<img src="img/cartel-800.jpg"
     srcset="img/cartel-400.jpg 400w, img/cartel-800.jpg 800w, img/cartel-1600.jpg 1600w"
     sizes="(min-width: 700px) 50vw, 100vw"
     alt="Cartel del Festival de Otoño" width="800" height="1131">

• srcset: las versiones disponibles y su ancho real (w).
• sizes: cuánto ocupará la imagen en pantalla. El navegador elige la versión adecuada.

💡 Consejo. Optimiza siempre las imágenes antes de subirlas: exporta al tamaño necesario, usa JPG o WebP para fotografías, PNG o SVG para gráficos planos, y comprime. Una web que pesa menos carga antes, gasta menos datos del usuario y consume menos energía.

• Tamaños en rem, nunca en píxeles fijos para el texto.
• Medida de línea (line length) cómoda: max-width: 65ch en los bloques de texto.
• Titulares que escalan con la pantalla: font-size: clamp(2rem, 5vw, 4rem); (mínimo, preferido, máximo).

• Modo dispositivo de las DevTools (icono del móvil): prueba varios anchos, no solo modelos concretos.
• Tu propio móvil: nada sustituye a tocar la página con el dedo.
• Amplía el texto del navegador al 200 %: la página debe seguir siendo usable (requisito de accesibilidad).

• Olvidar la etiqueta viewport.
• Anchos fijos (width: 1200px) que obligan a desplazarse en horizontal.
• Puntos de ruptura copiados de un móvil concreto en lugar de donde se rompe el diseño.
• Imágenes enormes en todas las pantallas.