.caixa{ align-items: flex-end ; display: flex; justify-content: center; margin: 0.5rem; } .destaques{ display: grid; grid-gap: .2ren; grid-template-columns: 25% 25% 25% 25%; grid-template-rows: 33.33% 33.33% 33.33%; height: calc(100vh - 50px) ; } .destaques__titulo{ /* css BEM ou __ nas classes/componentes https://www.alura.com.br/artigos/criando-componentes-css-com-padrao-bem */ background: rgba(0, 0, 0, .5); color: #fdfdfd; padding: .6rem; /* REM: A letra R significa 'root', que quer dizer a raíz. A raíz do HTML é a própria tag . Se a gente define que o font-size desse elemento será de por exemplo: 18px, então 1rem = 18px, 2rem = 36px e seguindo... Então, não existe comportamento de cascata, ele sempre multiplica só uma vez com relação ao tamanho do font-size do https://www.alura.com.br/artigos/guia-de-unidades-no-css */ text-align: center; width: 100%; } .destaques__principal{ background: url('../img/fortnite.jpg') center/ cover no-repeat; grid-row: 1/ 3; } .destaques__secundario:nth-child(2){ /* nth-child() 2 filho */ background: url('../img/pubg.jpg') center/ cover no-repeat; } .destaques__secundario:nth-child(3){ background: url('../img/slack.png') center/ cover no-repeat; } .destaques__secundario:nth-child(4){ background: url('../img/whatsapp.png') center/ cover no-repeat; } .destaques__secundario:nth-child(5){ background: url('../img/cs-go.jpg') center/ cover no-repeat; } .destaques__categorias{ grid-column: 1/ 3; grid-row: 3/ 4; } .destaques__categorias___lista{ display: flex; flex-wrap: wrap; height: 100%; justify-content: space-between; } .destaques__categorias___item{ align-items: center; background: #fdfdfd; border: 0.2rem solid transparent; color: #333333; display: flex; width: 48%; justify-content: center; margin: 0.5rem; } .destaques__categorias___link{ color: inherit; /* significa que a cor herda do pai */ }