Minha imagem não ocupa 100% da Div como fica na aula do professor | Guia de estilos: montando páginas com componentes

Não sei se as imagens que tem um tamanho diferente, mas a minha imagem não ocupa toda a

Vou mandar meu CSS e a parte do HTML:

CSS: ` .cartao-de-video { /Classe criada para englobar a image, o botão, o título e a descrição/ margin-bottom: 2rem; /Esse cartão não tem nenhuma estilização, apenas essa margem para baixo para distanciar do outr cartão/

}

.cartao-de-video__video { /Estilizando a

que vai ficar em volta da imagem

/ position: relative; /É colocado position:relativo para que a imagem do vídeo seja referência para o botão pla/

width: 100%; /*Largura da div que ficará em volta da imagem*/

/*max-width: 20rem;

overflow: hidden; */ /*Qualquer imagem que vaze esse tamanho ficará escondido*/

margin-bottom: .5rem;

}

.cartao-de-video__video::before { content: '';

position: absolute; 
top: 50%;
left: 50%;

transform: translate(-50%, -50%);

display: block;

width: 4.875rem;
height: 4.875rem;

border-radius: 50%;

background-color: var(--branco); 
background-image: url(../../img/icones/play.svg); 
background-repeat: no-repeat; 
background-size: 1.75rem; 
background-position: center left 55%;

}

.cartao-de-video__titulo { color: var(--preto); font-size: var(--tamanho-destaque); font-weight: var(--peso-destaque);

margin-bottom: 0.5rem;

}

HTML: ´´

Vídeo XYZ

Publicado em março de 2019

Desde já agradeço a atenção.
Sucesso na sua jornada!