Existe alguma forma de construir o cabeçalho e reposicionar os itens sem precisar "duplicar" os itens no html? O menu "categorias", a logo do Alura Books invertem de lugar e esse menu se junta ao item favoritos, gostaria de saber se tem como reposicioná-los. Estou tentando com Grid mas não consigo posicioná-las onde acho necessário Não precisam comentar sobre estilização de fontes, minha dúvida é mais sobre o posicionamento.
Meu CSS para o header - desktop:
.cabecalho { background-color: var(--branco); display: flex; justify-content: space-between; position: relative; }
.cabecalho__menu-hamburguer { width: 24px; height: 24px; background-image: url(../img/header/Menu.svg); background-repeat: no-repeat; background-position: center; display: inline-block; margin: 0 0 0 1em; }
.opcoes__botao:checked~.opcoes__rotulo>.cabecalho__menu-hamburguer { background-image: url(../img/header/Menu-Aberto.svg); }
.opcoes__botao:checked~.opcoes__rotulo { background: var(--degrade-azul); padding-top: 3em; }
.container { display: flex; align-items: center; }
.cabecalho__imagem { padding: 1em; }
.lista__menu { display: none; position: absolute; top: 100%; width: 60vw; }
.opcoes__botao { display: none; }
.opcoes__botao:checked ~.lista__menu { display: block; }
.lista-menu__item, .lista-menu__titulo { background-color: var(--branco); padding: 1em; }
.lista-menu__titulo { color: var(--laranja); font-weight: 700; }
.lista-menu__link { background: var(--degrade-azul); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-transform: uppercase; }
.container__titulo { display: none; }
.opcoes__item { display: none; }
.container__texto { display: none; }
@media screen and (min-width: 968px) {
.cabecalho { background-color: var(--branco); display: grid; grid-template-columns: 3fr 1fr; grid-template-areas: "logo-menu-centro perfil"; }
.container__logo-menu {
grid-area: logo-menu-centro;
grid-columns: 2;
grid-template-areas: "logo menu-centro";
}
.logo__titulo {
grid-area: logo;
}
.menu-centro{
grid-area: menu-centro;
}
.opcoes {
display: flex;
}
.cabecalho__menu-hamburguer {
display: none;
}
.opcoes__item {
display: block;
}
.container__perfil {
grid-area: perfil;
justify-self: flex-end;
}
}