@layer components {
    .top_component {
        @apply min-h-screen w-full flex flex-col md:flex-row items-center gap-5 relative;

        & > div {
            @apply flex-1;
        }

        & > .top_component__image {
            @apply flex justify-center items-center px-5;

            & > img {
                @apply rounded-lg w-full;
            }
        }

        & > .top_component__presentation {
            @apply flex flex-col gap-3;

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

            & > h4 {
                @apply font-semibold text-xl;
            }

            & > p {
                @apply font-normal text-base;
            }

            & .top_component__actions {
                @apply flex flex-wrap my-3 gap-5;

                & a {
                    @apply flex-1 h-12 outline outline-2 rounded-md outline-on_surface dark:outline-dark_on_surface p-2 uppercase;
                    @apply flex items-center justify-center min-w-[150px];
                }
            }
        }
    }
}