forma de construir o cabeçalho e reposicionar os itens?

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;
}

}