Por entender que a necessidade de centralizarmos um ou mais elemento no nosso layout é um comportamento que se repete em muitas partes do nosso site/projecto resolvi com os conhecimentos aprendidos na aula de @mixin criar um mixin para centralizar os elementos do layout.

SCSS

@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

*Aplicando o @mixin na class .banner *

Esse mixin define o elemento como um container flexível e centraliza tanto na horizontal (usando justify-content: center) quanto na vertical (usando align-items: center). Você pode então aplicar esse mixin a qualquer elemento que você deseja centralizar usando a diretiva @include. Por exemplo:

.banner {
  @include center;
}

Apresentação