html,css vanilla, grid and flexbox.

Tu solución está excelente David solo tendría una sugerencia para ti, en tu código css, deberías reemplazar todas las unidades de px que es una unidad de medida absoluta por rem que es una unidad de medida relativa, esto hará que tu sitio se adapte proporcionalmente en los casos en lo que el usuario requiera un texto mas grande. el font-size por defecto es de 16px por lo que 1rem equivale a 16px, si cambias el font-size en la etiqueta html por ejemplo a 20px ahora 1rem equivale a 20px aunque lo mas recomendable es dejar el valor por defecto. Existen extensiones de vs code que hacen la conversión del valor automáticamente o puedes hacerlo manualmente dividiendo la cantidad de px que deseas asignar, entre en valor del font-size de html que dijimos que por defecto, el 16px por ejemplo... quieres asignar un margin-top de 35px a tu h1 lo que debes hacer es dividir el valor a asignar 35px entre el valor por defecto 16px que sería un total de 2.1875 y este sería el valor en rem que asignaras a tu margin-top quedando margin-top: 2.1875rem y de esta manera deberías reemplazar todas tus medidas en pixeles