Ejercicios de Diseño de Interfaces Web

Con CSS Grid y grid-template-areas: en pantallas de 700px o más, la cabecera y el pie ocupan todo el ancho, y entre ellos van el menú (200px de ancho, a la izquierda), el contenido (el espacio restante) y la barra lateral (180px, a la derecha), con 16px de separación. En pantallas más estrechas, todo en una columna en el orden cabecera, menú, contenido, barra lateral y pie.

Coloca los tres planes en una fila de columnas iguales con 24px de separación y la misma altura (aunque tengan distinto texto). El plan destacado (.plan--destacado) tiene un borde de 3px sólido #7c3aed y está ampliado un 5 % (transform: scale(1.05)). En pantallas de menos de 600px, los planes van uno debajo de otro y el destacado no se amplía.