@import 'tailwindcss';
@reference "./tailwind.css";

.card {
    @apply rounded-xl
}

.content-panel ul {
    @apply list-disc list-inside ml-4
}

.content-panel ol {
    @apply list-decimal list-inside ml-4
}

details details .group-label span {
    font-size: var(--sl-text-sm);
    font-weight: 400;
}

.card .icon {
    background-color: transparent !important;
    border-color: var(--sl-color-text) !important
}

@media (min-width: 50rem) {
    .hero {
        grid-template-columns: 7fr 7fr;
    }

    .hero>.hero-html {
        width: 100%;
    }
}