[Dúvida] Dúvida na classe do media queries

Não entendi o uso das classes "cabecalho__nav_list_item-sobre, cabecalho__nav_list_item-perfil, cabecalho__nav_list_item-carrinho..." no css mas essas classes nem existem no html. Alguém pode me esclarecer, por favor? Deixei passar algum detalhe? Agradeço desde já

<nav class="cabecalho__nav">
            <ul class="cabecalho__nav_list">
                <li>
                    <h1 class="cabecalho__logo">
                        <img src="./assets/icons/logo.svg" alt="logo da use dev">
                    </h1>
                </li>
                <li class="cabecalho__nav_list_item">
                    <a href="#" class="cabecalho__nav_list_link">
                        Sobre nós
                    </a>
                </li>
                <li class="cabecalho__nav_list_item cabecalho__nav_list_item-input">
                    <input type="search" id="search" placeholder="O que você procura?" class="cabecalho__nav_list_input">
                    <img src="./assets/icons/search.svg" alt="lupa" class="pesquisa-icon">
                </li>
                <li class="cabecalho__nav_list_item">
                    <a href="#" class="cabecalho__nav_list_link cabecalho__nav_list_link-login">Login</a>
                </li>
                <li class="cabecalho__nav_list_item">
                    <a href="#" class="cabecalho__nav_list_link cabecalho__nav_list_link-perfil">
                        <img src="./assets/icons/perfil.svg" alt="perfil">
                    </a>
                </li>
                <li class="cabecalho__nav_list_item">
                    <a href="#" class="cabecalho__nav_list_link cabecalho__nav_list_link-carrinho">
                        <img src="./assets/icons/carrinho.svg" alt="carrinho">
                    </a>
                </li>
            </ul>
        </nav>

    @media screen and (max-width: 768px) {
.cabecalho__nav_list {
    grid-template-areas: 
    "logo sobre login perfil carrinho"
    "input input input input input";
    grid-template-columns: 1fr 2fr .5fr .5fr .5fr;
}

.cabecalho__logo {
    grid-area: logo;
    justify-self: center;
}

.cabecalho__nav_list_item-sobre {
    grid-area: sobre;
}

.cabecalho__nav_list_item-login {
    grid-area: login;
}

.cabecalho__nav_list_item-perfil {
    grid-area: perfil;
}

.cabecalho__nav_list_item-carrinho {
    grid-area: carrinho;
}

.cabecalho__nav_list_item-input {
    grid-area: input;
}

}