.Card {
  @apply flex basis-full animate-slide-fade-scroll flex-col overflow-clip rounded-lg border border-solid border-gray-300 bg-white text-gray-900 no-underline shadow-sm [animation-range:entry_10%_contain_10dvh] [animation-timeline:--card-timeline] [view-timeline-name:--card-timeline] hover:text-gray-900 focus:text-gray-900 dark:bg-gray-25;
}

.Card:hover .Card-title {
  @apply bg-gray-100;
}

.Card-media {
  @apply flex grow items-center justify-center bg-gray-50;
}

.Card-media img {
  @apply blokk h-auto w-full;
}

/* Supply a max size because in some instances the image is not constrained by a wrapping element. */
.Card > img {
  @apply max-h-[7.5rem];
}

.Card-media.is-missing {
  @apply m-auto min-h-[9.6875rem] before:btu-icon before:btu-icon-blocks before:rounded-full before:bg-gray-100 before:p-[.88rem] before:btu-icon-xl;
}

.Card-title {
  @apply overflow-hidden text-ellipsis whitespace-nowrap rounded-b-lg border-t border-gray-200 p-4 text-sm;
}
