.channel-flex-custom {
  display: flex; /* Ativa o layout Flexbox */
  flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha */
  gap: 1rem; /* Define o espaçamento entre os itens */
  /* Opcional: Alinhar itens no início da linha se as alturas variarem */
  /* align-items: flex-start; */
}

.channel-item {
  /* Calcula a largura para 6 colunas, subtraindo o espaço do gap */
  /* Ajuste o valor '1rem' se o seu gap for diferente */
  /* É importante ter box-sizing: border-box; (geralmente já definido globalmente) */
  width: calc((100% / 6) - (5 * 1rem / 6)); /* (100% / num_colunas) - ((num_colunas - 1) * gap / num_colunas) */

  /* Você pode manter as classes flex do Tailwind ou adicionar estilos aqui */
  /* Exemplo:
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  */
}

/* Estilo para a mensagem de "Nenhum canal" ocupar a largura total */
.channel-flex-custom > .col-span-full {
    width: 100%; /* Ocupa toda a largura */
}


/* Ajustes responsivos (opcional) */
@media (max-width: 768px) {
  .channel-item {
    width: calc((100% / 4) - (3 * 1rem / 4)); /* 4 colunas */
  }
}

@media (max-width: 480px) {
  .channel-flex-custom {
    gap: 0.5rem;
  }
  .channel-item {
    width: calc((100% / 3) - (2 * 0.5rem / 3)); /* 3 colunas */
  }
   .channel-item img,
   .channel-item div { /* Reduzir tamanho da imagem em telas pequenas */
      width: 5rem;  /* 80px */
      height: 5rem; /* 80px */
  }
}