1.

) Vamos a ver las tres posibles formas de poner un media queries

-> archivo externo <link rel="stylesheet" href="css/media.css" media="screen and

(max-width=800px) and (min-width=600px)"> y en el archivo externo solo pongo
body{border:10px solid blueviolet}

-> archivo externo dentro del estilos.css en la parte de abajo

-> archivo en .html con etiqueta <style></style>

2.) Definamos los media queries que vamos a utilizar

Primero el mas grande que seria
@media screen and (max-width:1024px){
}

Ahora vamos a hacer que el diseño sea elastico para lograr que el contenido se
apile uno debajo del otro y como todos los elementos tienen un display flex solo
utilizamos el flex-wrap:wrap;

Ahora comentemos todas las secciones y solo dejamos el header y realizamos el

header