[Dúvida] Menu não aparece ao clicar em "categorias"

O código funciona certinho até aplicar o "display:block" no css, dps disso não aparece mais o menu ao clicar.

Meu código:

HTML

    <ul class="opções">
        <input type="checkbox" id="opções-menu" class="opções__botão">
        <label for="opções-menu"></label>
        <li class="opções__item">Categorias</li>
    </label>
    <ul class="lista-menu">
        <li class="lista-menu__item"> <a href="#" class="lista-menu__link">Programação</a>
        </li>
        <li class="lista-menu__item">
            <a href="#" class="lista-menu__link">Front-end</a>
        </li>
        <li class="lista-menu__item">
            <a href="#" class="lista-menu__link">Infraestrutura</a>
        </li>
        <li class="lista-menu__item">
            <a href="#" class="lista-menu__link">Business</a>
        </li>
        <li class="lista-menu__item">
            <a href="#" class="lista-menu__link">Design e UX</a>
        </li>
    </ul>

CSS

@media screen and (min-width:1024px) {
    
    .container__titulo,
    .container__titulo--negrito {
        font-family: var(--fonte-secundario);
        font-size: 30px;
    }

.container__titulo {
    font-weight: 400;
    display: block;
}

.container__titulo--negrito {
    font-weight: 700;
}

.opções {
    display: flex;
}

.opções__item {
    padding: 0 1em;
    text-transform: uppercase;
}

.opções__link {
    text-decoration: none;
    color: var(--preto);
}

.container__imagem-transparente {
    display: none;
}

.cabeçalho__menu-hamburguer {
    display: none;
}

.opções__botão:checked ~ .lista-menu {
    display: block;
    width: auto;
}

.opções__botão {
    display: none;
}

}