Icone do menu não está aparecendo. | HTML e CSS: responsividade com mobile-first


```HTML 
<!DOCTYPE html>
<html lang="ptBR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AluraBooks</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="cabecalho">
        <span cabecalho__menu-hamburguer></span>    
        <img src="img/Logo.svg" alt="logo-alura-books">
        <a href="#"><img src="img/Favoritos.svg" alt="Meus favoritos"></a>
        <a href="#"><img src="img/Compras.svg" alt="carrinhos de compras"></a>
        <a href="#"><img src="img/Usuário.svg" alt="meu perfil"></a>
    </header>
    
</body>
</html>


header.css
.cabecalho__menu-hamburguer{
    width: 24px;
    height: 24px;
    background-image: url("../img/Menu.svg");
    display: inline-block;
}

style.css
@import url("styles/header.css");
:root {
--cor-de-fundo: #EBECEE;
}
body {
    background-color: var(--cor-de-fundo);
}

h1{
    background-color: white;
}