@media (max-width: 768px) {
    .channels-menu {
        display: flex;
        flex-direction: column;

        .channel-card {
            height: 1em;
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 0.75em;
            font-size: larger;
            font-weight: 900;
            user-select: none;
            transition: background-color 100ms;

            &::before {
                content: "#";
            }

            &.public-channel::after {
                content: "🌏︎";
                margin-left: 0.5em;
                font-size: small;
                color: #ccc;
            }

            &:hover {
                background-color: #2c333e;
            }
        }
    }
}