Styled-Components mobile menu - css

Question

I'm trying to achieve the following result. I have a responsive menu, however when the screen is less than 768px should hide a few elements (the ItemsMenu and LanguageItems) from the horizontal menu that it is for the desktop and display in the burger menu for mobile.
I'm having an issue because if I use display: none; it'll hide in both displays, for desktop and for mobile. How would be a better approach to achieve this result:
Component:
function Languages() {
const [language, setLanguage] = useState("en");
const handleLanguage = (language) => (event) => {
setLanguage(language);
};
return (
<>
<Lang>
<Logo>
<h1>Flávio</h1>
</Logo>
<ItemsMenu>
<li>{languages[language].about}</li>
<li>{languages[language].project}</li>
<li>{languages[language].contact}</li>
</ItemsMenu>
<LanguageIcon>
<img src={English} alt="EN" onClick={handleLanguage("en")} />
<img src={Japanese} alt="JP" onClick={handleLanguage("jp")} />
<img src={Russian} alt="RU" onClick={handleLanguage("ru")} />
<img src={Portuguese} alt="PT-BR" onClick={handleLanguage("ptbr")} />
</LanguageIcon>
</Lang>
</>
);
}
Styled-component:
import styled from "styled-components";
export const Lang = styled.div`
display: flex;
justify-content: space-between;
margin: auto;
width: 100%;
li:hover {
transition: all 0.2s ease-in-out;
transform: scale(1.5);
}
`;
export const Logo = styled.div`
color: #2e186a;
cursor: pointer;
`;
export const ItemsMenu = styled.ul`
display: flex;
justify-content: center;
cursor: pointer;
color: #2e186a;
margin: auto;
li {
display: inline-block;
color: #2e186a;
cursor: pointer;
padding-left: 1.5rem;
}
#media (max-width: 768px) {
/* display: none; */
}
`;
export const LanguageIcon = styled.div`
#media (max-width: 768px) {
/* display: none; */
}
img {
height: 2em;
margin-left: 1em;
cursor: pointer;
}
img:hover {
transition: all 0.2s ease-in-out;
transform: scale(1.5);
}
`;