1 Ajustando o layout para telas menores
.apresentacao__conteudo{
width: 50%;
display: flex;
flex-direction: column;
gap: 40px;
}
2 Implementando media queries para mudança de layout
@media (max-width: 1023px)
3 Refinando o layout responsivo
@media (max-width: 1023px){
.apresentacao{
flex-direction: column-reverse;
text-align: center;
}
}
4 Ajustando o cabeçalho para telas menores
@media (max-width: 1023px){
.apresentacao{
.cabecalho{
padding: 8%;
}
}
5 Centralizando itens do menu em telas menores
@media (max-width: 1023px){
.cabecalho__menu{
justify-content: center;
}
}
6 Refinando o design responsivo do cabeçalho
@media (max-width: 768px) {
.cabecalho{
padding: 15%;
}