@layer components {
    .posts, .post {
        @apply min-h-screen;

        & h1 {
            @apply text-4xl;
        }

        & h2 {
            @apply text-3xl;
        }

        & h3 {
            @apply text-2xl;
        }

        & h4 {
            @apply text-xl;
        }

        & h5 {
            @apply text-lg;
        }

        & h6 {
            @apply text-base;
        }

        & h1, & h2, & h3, & h4, & h5, & h6 {
            @apply my-3 font-bold;
        }

        & p {
            @apply text-base my-2;
        }

        & ul li {
            @apply list-disc list-inside ml-5;
        }

        & ol li {
            @apply list-decimal list-inside ml-5;
        }

        & a {
            @apply text-primary;
        }

        & blockquote {
            @apply border-l-4 border-primary/50 dark:border-dark_primary/50 pl-3 my-3 bg-primary/5 dark:bg-dark_primary/5;
        }

        & .tags_list {
            @apply flex flex-row flex-wrap gap-2;
        }

        & code {
            @apply bg-primary/10 dark:bg-dark_primary/10 rounded-md p-1;
        }

        /* Fix useless padding */
        & pre code {
            @apply p-0;
        }

        .metadata {
            & > .icon_container, & > .tags_list {
                @apply my-1;
            }
        }
    }

    .posts {
        & > .posts__cards {
            @apply grid grid-cols-1 gap-5 md:grid-cols-2;
            @apply mx-auto max-w-3xl;

            & > div {
                @apply rounded-xl overflow-hidden relative;
                @apply bg-primary/10 dark:bg-dark_primary/10;
                @apply shadow-md shadow-primary/5 dark:shadow-dark_primary/5;

                & > .warning {
                    @apply absolute top-0 right-0 bg-warning text-on_warning dark:bg-dark_warning dark:text-dark_on_warning rounded-bl-md p-3;
                }

                & > img {
                    @apply w-full h-48 object-cover;
                }

                & > div {
                    @apply p-5;
                }
            }
        }
    }

    .post {
        & > div {
            @apply mx-auto max-w-3xl;
            @apply flex flex-col;
        }

        & pre > code {
            @apply rounded-md my-2;
        }
    }
}