Responsivel(Detalhes adicionais)

Responsivel

#Reponsivo; Para ser precisa inserir essa tag <meta name="viewport" content="width=device-width, initial-scale=1" /> no html.

#Media query(da largura de 800 a 1000 é roxo, o restante é branco)(pode ter mais de uma media query)(se as duas medias foram verdadeiras, a ultima prevalecerá)(as medias queries que ajudam sendo bem montadas a testar a responsividade da tela)
@media (max-width: 1000px) and (min-width: 800px) {
body {
background: #7159c1;
}
}

@media (max-width: 600px) {
body {
background: blue;
}
}

#Mobile first(você inicia com a largura minima, e vai aumentando conforme define as quebras, min-width)

#Desktop first(você inicia com a largura maxima e vai diminuindo a tela, max-width)

#Quando for construir um layout responsivo, dificilmente vai definir tudo em pixel, evite, use porcentagem, use o flexbox.

#Unidades de fonte, unidades relativas, estão mais ligados a proporção do layout

# relacionando ao tamanho da fonte,

em - ele é relativo ao elemento pai(ele escala, pega do elemento anterior e multiplica, não é bom)
rem - ele -e relativo ao root(elemento html) por padrão o elemento html tem 16px(ele é melhor que o em)

#Unidade relativas ao tamanho do viewport - relativo a onde estã sendo aberto o layout
vh - > height: 100vh isso ocupa a tela em exibição inteira(da janela)
vw -. width -> relativo a largura

#z-index -> quando tive dois elementos que aparecem ocupando o mesmo espaço, ele vai determinar qual aparece por cima e qual por baixo

#selectores o +, ele seleciona o próximo elemento direto, exemplo abaixo ele seleciona apenas a tag a que for proximo a tag a, ignorando o primeiro
exemplo:

header nav a + a {
margin: 2rem 0 0;
}

# com o flexbox você consegue mudar o local da imagem de baixo do texto para cima.

.banner .center {
flex-direction: column;
}

.banner img {
order: -1. // assim a imagem vai para cima do texto
}