@import "tailwindcss";

@source "../**/*.{html,js,css,svg}";

@utility charity-card {
  @apply bg-white p-4 md:p-8 rounded-xl flex flex-col sm:flex-row items-center border border-gray-200 gap-4 sm:gap-8;
}

@utility charity-title {
  @apply text-2xl text-center sm:text-start font-medium;
}

@utility charity-image {
  @apply h-40 w-40 object-contain;
}

@utility charity-links {
  @apply grid gap-4 grid-cols-2 sm:grid-cols-2 md:grid-cols-4;
}

@utility charity-phonenumber {
  @apply text-blue-500;
}

@utility charity-email {
  @apply text-blue-500;
}

@utility charity-information {
  @apply flex flex-col items-center sm:items-start;
}

@utility charity-card-body {
  @apply flex flex-col items-center sm:items-start space-y-8 sm:space-y-4;
}

@utility charity-link {
  @apply flex gap-2 px-4 py-2 rounded-lg border-2 border-gray-200 items-center justify-center;
}