.card {
    @apply relative;
    @apply grid;
    @apply items-stretch;
    @apply border;
    @apply border-tint-300;
    @apply bg-white;
    @apply shadow-sm;
    @apply rounded-sm;
}

.card-details {
    @apply overflow-hidden;
}

.card-details-overflow {
    @apply grid;
    @apply gap-4;
    @apply p-6;
    @apply overflow-x-auto;
}

.card-danger {
    @apply bg-red-400 text-white;
}

@screen md {
    .card {
        grid-template-columns: 16rem 1fr;
    }

    .card-has-header {
        grid-template-rows: auto 1fr;
    }

    .card.card-no-props {
        @apply block;
    }

    .card-header {
        @apply span-2;
    }

    .card-details-overflow {
        @apply p-8;
    }
}