@layer components {
    .project_list {
        @apply grid grid-cols-1 gap-4 md:grid-cols-2 mt-3;

        & > a {
            @apply rounded-lg p-5 flex flex-col items-center gap-2;
            @apply bg-primary/10 dark:bg-dark_primary/10;
            @apply shadow-md shadow-primary/5 dark:shadow-dark_primary/5;

            &:hover {
                @apply bg-primary/20 dark:bg-dark_primary/20;
                @apply shadow-md shadow-primary/10 dark:shadow-dark_primary/10;
            }

            & > img {
                @apply h-1/2;
            }

            & > div {
                @apply flex flex-col justify-center h-full;
            }
        }
    }
}