.mega-menu {
    @apply overflow-hidden min-w-[48rem] w-max border border-primary border-opacity-10;

    &.mega-menu--grid,
    &.mega-menu--marketing {
        > ul {
            > li a .atm-paragraph p {
                @apply max-w-none;
            }
        }
    }

    &.mega-menu--grid {
        > ul {
            @apply grid grid-cols-2 !p-8;
        }
    }

    &.mega-menu--marketing {
        @apply grid grid-cols-2 p-2;

        > ul {
            @apply max-h-[480px] overflow-y-scroll;
        }

        .marketing-area {
            @apply bg-primary bg-opacity-10 text-primary p-4 justify-between flex flex-col rounded-2xl max-w-sm;

            .atm-image img {
                @apply aspect-video object-cover rounded-lg mb-4 w-full;
            }

            .atm-heading {
                @apply mb-2;
            }

            .atm-paragraph {
                @apply mb-8 text-gray-500 text-left;
            }
        }
    }

    > ul {
        @apply !p-6 flex flex-col gap-6;

        > li a {
            @apply flex gap-6;

            .atm-icon {
                @apply text-h4 w-7 flex-shrink-0;
            }

            .atm-heading {
                @apply m-0 mb-2;
            }

            .atm-paragraph p {
                @apply text-sm  max-w-[26ch] transition-colors m-0;
            }

            &:hover * {
                @apply text-secondary-col-1;
            }
        }
    }

    footer {
        @apply font-display bg-primary bg-opacity-10 text-primary px-10 py-3 text-sm text-center;
    }
}