@layer components {
    .posts, .post {
        @apply bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface;
        @apply min-h-screen p-5;

        & h1 {
            @apply text-5xl;
        }

        & h2 {
            @apply text-4xl;
        }

        & h3 {
            @apply text-3xl;
        }

        & h4 {
            @apply text-2xl;
        }

        & h5 {
            @apply text-xl;
        }

        & h6 {
            @apply text-lg;
        }

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

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

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

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

    .posts {
        & > .posts__cards {
            @apply grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 m-5;

            & > a {
                @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;

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

                & > div {
                    @apply p-5 flex flex-col gap-3;
                }
            }
        }
    }

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

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