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

        & > h1 {
            @apply font-bold text-3xl text-center;
        }
    }

    .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;

            & > 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;

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

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

                    & > h2 {
                        @apply font-bold text-2xl;
                    }
                }
            }
        }
    }
}