/* Estilos gerais para garantir que o :before funcione corretamente */
#menuinsta li.slick-slide > a {
    position: relative; /* Mantém a posição relativa para que o :before funcione */
    display: flex; /* Permite controlar melhor a disposição dos elementos */
    flex-direction: column; /* Faz com que a imagem fique acima do texto */
    align-items: center; /* Centraliza a imagem e o texto */
    text-align: center; /* Garante que o texto fique centralizado */
    padding: 10px 5px; /* Adiciona um pequeno espaçamento interno */
}

/* Ajuste do :before para ser a imagem da categoria */
@media screen and (max-width: 767px) {
    #menuinsta li.slick-slide > a:before { 
        content: "";
        display: block;
        width: 50px; /* Ajuste o tamanho da imagem conforme necessário */
        height: 50px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        margin-bottom: 8px; /* Espaço entre a imagem e o título */
    }
}

/* Definir imagens para cada categoria */
@media screen and (max-width: 767px) {
    #menuinsta li.slick-slide:nth-child(1) > a:before { 
        background-image: url("https://cdn.awsli.com.br/2804/2804305/arquivos/1.png");
    }
    
    #menuinsta li.slick-slide:nth-child(2) > a:before { 
        background-image: url("https://cdn.awsli.com.br/2804/2804305/arquivos/2.png");
    }

    #menuinsta li.slick-slide:nth-child(3) > a:before { 
        background-image: url("https://cdn.awsli.com.br/2804/2804305/arquivos/4.png");
    }

    #menuinsta li.slick-slide:nth-child(4) > a:before { 
        background-image: url("https://cdn.awsli.com.br/2804/2804305/arquivos/3.png");
    }
}