[Bug] Não sei o que ta acontecendo no meu projeto

estou fazendo passo a passo mas não sei o que aconteceu! Help!!!

`

Inicio

Esse é o css`@font-face { font-family: 'icones'; src: url(../estilo/font/icones.ttf); } body { background-color: #1D232A; font-family: 'Open Sans','icones', sans-serif; color: #FFFFFF; } /* ### Corpo ###/ O menu esta funcionando norma / ### Corpo ###*/

.principal{ padding: 24px 16 } .titulo-pagina{ font-size: 1.5rem; font-weight: 700; } .cartao{ width: 100%; border-radius: 15px; overflow: hidden; background-color: #2C343A; } .cartao__conteudo{ padding: 16px; display: grid; grid-template-columns: 1fr 1fr; } .cartao__destaque{ grid-column:span2; } .cartao__titulo{ font-size:1.2rem; font-weight: 700; grid-column:span2; } .cartao__perfil{ color:#95999C ; font-size: 0.9rem; grid-column:span2; } .cartao__info{ display: flex; align-items: center; color: #95999C; } .cartao__info--tempo::before{ content:"\e90c"; margin-right: 8px; } .cartao__info--visualizacao::before{ content:"\e90f"; margin-right: 8px; } .cartao__botao{ display: flex; justify-content: center; align-items: center; background-color: #0480DC ; width: 40px; height: 40px; border-radius: 10px; font-size: 0.9rem; } .cartao__botao--play::before { content:"\e90b"; font-size: 24px; }

.cartao__botao--destaque{ width: 100%; grid-column:span2; } .cartao__botao--destaque::before{ margin-right: 8px; }`