A logo que aparece continua sendo a do mobile, não a do desktop.
Trecho:
<a class="logo" href="index.html" title="Voltar para a página inicial">
<img
class="logo-mobile"
src="img/bussola-jornada-branca.png"
alt="Bussola do logo Jornada Viagens na cor branca"
/>
<img
class="logo-desktop"
src="img/bussola-texto-jornada-branco.png"
alt="Bussola do logo Jornada Viagens na cor branca"
/>
</a>
A imagem mostrada continua sendo a do mobile.
CSS:
header{
background-color: var(--background-tertiary-color);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
padding: 38px 48px;
position: relative;
}
.logo {
display: inline-block;
width: 68px;
height: 64px;
}
.logo-mobile {
display: block;
}
.logo-desktop {
display: none;
}
.navigation-menu {
margin-top: 24px;
}
input[type="checkbox"]:checked ~ nav {
display: block;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: var(--background-tertiary-color);
}
nav {
display: none;
}
.list-links li a {
color: var(--text-secondary-color);
text-decoration: none;
font-weight: var(--menu-text-weight);
font-size: 24px;
}
.list-links li {
margin: 16px 0;
}
.list-links {
list-style: none;
}
@media screen and (min-width: 768px) {
.navigation-menu {
margin-top: 0;
width: 467px;
}
.navigation-menu label {
display: none;
}
.navigation-menu nav {
display: block;
}
.navigation-menu ul {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0;
}
.navigation-menu li {
margin: 0;
}
}
@media screen and (min-width: 1024px) {
.logo-desktop {
display: block;
}
.logo-mobile {
display: none;
}
}
Vocês conseguem encontrar o erro?
