@layer components {
    .deck {
        h1 {
            @apply text-[12cqw] text-primary text-center;
        }

        h2 {
            @apply text-[10cqw] text-accent text-center;
        }

        h3 {
            @apply text-[6cqw] text-secondary text-center;
        }

        h4 {
            @apply text-[4cqw] text-info text-center;
        }

        p {
            @apply text-[3cqw] max-w-[90cqw] text-center;
        }

        a {
            @apply link-info inline whitespace-nowrap no-underline;
        }

        pre {
            @apply min-w-[80cqw] p-2 bg-neutral text-base-100 text-[2cqw] rounded border-1 border-info;
        }

        blockquote {
            @apply min-w-[50cqw] m-[2cqw] p-[2cqw] rounded-[2cqw] bg-base-100;
        }

        blockquote p {
            @apply font-serif font-light text-left;
        }

        blockquote p em {
            @apply text-right;
        }

        ul {
            @apply min-w-[50cqw] list-outside list-disc pl-[3cqw];
        }

        ul ul {
            @apply min-w-0 list-outside list-[circle] pl-[3cqw] mt-0;
        }

        ol {
            @apply min-w-[50cqw] list-outside list-decimal pl-[3cqw];
        }

        li {
            @apply text-[3cqw];
        }

        li p {
            @apply contents;
        }

        img {
            @apply object-contain w-full rounded-[1cqw];
        }

        a img {
            @apply inline-block w-auto h-[1em] rounded-none align-middle;
        }

        p:has(> img) {
            @apply flex flex-col items-center grow shrink justify-center min-w-0 min-h-0;
        }

        p > img {
            @apply h-auto shrink min-h-0;
        }

        /* ![alt](image.png#fill) fills the remaining slide space */
        p:has(> img[src$="#fill"]) {
            @apply w-full;
        }

        p > img[src$="#fill"] {
            @apply flex-1 min-h-0;
        }

        img + em {
            @apply text-[1.5cqw] opacity-60 shrink-0;
        }

        table {
            @apply min-w-[50cqw] m-[1cqw] bg-base-100 rounded-[2cqw] text-[3cqw];
        }

        th,
        td {
            @apply px-[2cqw] py-[1cqw];
        }

        & table {
            & :where(thead tr, tbody tr:not(:last-child)) {
                border-bottom: solid var(--color-base-200);
            }
        }

        .col-header {
            @apply w-full flex flex-col items-center;
        }

        .cols {
            @apply flex flex-row gap-[4cqw] w-full flex-1 min-h-0;
        }

        .col {
            @apply flex-1 flex flex-col items-center justify-center min-w-0 min-h-0;
        }

        .col :is(blockquote, ul, ol, table, pre) {
            @apply min-w-0 w-full max-w-full;
        }

        .col p {
            @apply max-w-full;
        }
    }
}