nb-card {
  @apply com-w-full md:com-h-52 com-h-[198px] com-cursor-pointer com-m-0;

  nb-card-body {
    @apply com-overflow-hidden com-flex com-flex-row com-px-4;
    .logo-section {
      @apply md:com-mr-4 com-mr-3;
      .logo {
        @apply com-w-10 com-h-10 md:com-w-[52px] md:com-h-[52px] com-rounded-full com-border com-border-gray-300 com-border-solid com-flex com-justify-center com-items-center com-p-1 com-m-auto md:com-m-0;
        img {
          @apply com-w-full;
        }
      }
      .without-logo {
        @apply com-w-10 com-h-10 md:com-w-[52px] md:com-h-[52px] com-rounded-full com-border com-border-gray-300 com-border-solid com-flex com-justify-center com-items-center com-bg-gray-100 com-m-auto;
        nb-icon {
          @apply com-text-[32px];
        }
      }
    }

    .details-container {
      @apply com-flex com-flex-col com-h-full com-text-start com-w-full;
      .details {
        @apply com-flex md:com-block com-flex-col com-items-start;
        p {
          @apply com-m-0;
        }
        .name {
          @apply com-font-bold md:com-text-base com-text-sm com-m-0 com-mb-2 com-line-clamp-1;
        }
        .description-and-latest-message {
          @apply com-m-0 md:com-mb-4 com-mb-3 com-h-10;
          .description {
            @apply md:com-text-sm com-text-xs com-font-normal com-text-gray-500 com-line-clamp-2;
            transition: opacity 0.8s ease;
          }
          .latest-message {
            @apply com-flex com-items-start md:com-text-sm com-text-xs com-font-normal com-text-gray-500 com-line-clamp-2;
            transition: opacity 0.8s ease;

            span {
              @apply md:com-text-sm com-text-xs com-font-normal com-text-gray-500 com-line-clamp-2;
            }

            .message-icon {
              @apply com-h-4 com-w-4 com-flex com-flex-shrink-0 com-m-0 com-mr-1 com-mt-2px;
            }
          }
        }

        .logo-and-member-count {
          @apply com-m-0 com-mb-4 com-flex com-flex-row;
          app-badge {
            @apply com-mr-2 com-flex-shrink-0;
          }
        }
      }
      .join-channel {
        @apply com-mx-0 md:com-w-full com-w-[96%];
      }
    }
  }
}
