h1{ font: bold 35px Verdana, sans-serif; color:white; } h2{ font: bold 14px Verdana, sans-serif; } h3{ font: bold 10px Verdana, sans-serif; } body{ text-align: center; text-align: left; } #agrupar { width: 90%; max-width: 1000px; margin: 20px auto; display: grid; grid-gap: 20px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, auto); grid-template-areas: "cabecera cabecera cabecera" "menu menu menu" "logo description foto" "pie pie pie"; } header { text-align: center; background: purple; width:auto; border: 1px solid #999999; padding: 5px; border-radius: 45px; box-shadow: rgb(150,150,150) 5px 5px 10px; grid-area: cabecera; } nav { background: #CCCCCC; padding: 0px; border-radius: 20px; box-shadow: rgb(150,150,150) 5px 5px 10px; text-align: center; grid-area: menu; } nav li{ display: inline-block; list-style: none; padding: 10px; font: bold 14px verdana, sans-serif; } #seccion{ float: left; } #logo { float: left; border: 1px solid #999999; padding: 5px; background: #CCCCCC; justify-content: center; grid-area: logo; } #description { float: left; width: auto; border: 1px solid #999999; padding: 20px; background: #CCCCCC; text-align: center; justify-content: center; grid-area: description; } #foto { float: left; border: 1px solid #999999; padding: 5px; background: #CCCCCC; justify-content: center; grid-area: foto; } #pie { clear: both; float:left; text-align:center; padding: 20px; border-top: 2px solid #999999; grid-area: pie; } #pie figure { float: left; } @media screen and (max-width: 768px){ #agrupar { grid-template-areas: "cabecera cabecera cabecera" "menu menu menu" "logo description description" "foto foto foto" "pie pie pie"; } } @media screen and (max-width: 480px) { #agrupar { grid-template-areas: "cabecera cabecera cabecera" "menu menu menu" "logo logo logo" "description description description" "foto foto foto" "pie pie pie"; } }