<template>
    <footer>
        <AppDesktopFooterAboutUs />
        <div>
            <AppDesktopFooterNewsletters />
            <AppDesktopFooterSocialNetworks />
            <div>
                <AppDesktopFooterCustomerServices />
                <AppDesktopFooterPurchaseGuide />
                <AppDesktopFooterTrustSymbols />
            </div>
        </div>
    </footer>
</template>

<script setup></script>

<style lang="scss">
footer {
    @apply w-full flex flex-col sm:items-center justify-center bg-[#F5F5F5];
    @apply gap-4 px-3 py-12;
    @apply xl:flex-row xl:gap-[6.7rem] 2xl:py-[6.3rem];

    &>div:not([class]) {
        @apply flex flex-col gap-6;

        &>div:not([class]) {
            @apply flex flex-col items-center sm:items-start sm:flex-row justify-center gap-8 mt-4 lg:justify-between xl:gap-6 xl:mt-10;
        }
    }
}
</style>
