@layer components {
  .card {
    @apply relative overflow-hidden rounded-md bg-white shadow-md;

    &.card-with-header {
      .card-title {
        @apply space-y-1.5 rounded-b-none bg-primary px-4 py-2.5;

        h5 {
          @apply text-lg font-medium text-secondary;
        }

        p {
          @apply text-xs font-normal text-white;
        }

        .title-icon {
          @apply absolute top-2.5 right-4;

          i {
            @apply text-sm;
          }
        }
      }
    }
  }
}