.mol-faqs {
    @apply lg:flex gap-8 mt-8;

    .faq-nav {
        @apply lg:min-w-[360px] lg:max-w-sm relative overflow-hidden;

        .faq-nav-mobile {
            @apply lg:hidden relative;

            .mol-submenu {
                @apply m-0;

                .atm-heading {
                    @apply hidden;
                }

                .submenu-prev,
                .submenu-next {
                    @apply h-full;

                    .atm-icon {
                        @apply py-4;
                    }
                }

                .submenu-prev {
                    @apply text-white left-0;
                    background-image: linear-gradient(
                        to right,
                        #990d7f 10%,
                        transparent
                    );
                }

                .submenu-next {
                    @apply text-white right-0;
                    background-image: linear-gradient(
                        to left,
                        #990d7f 10%,
                        transparent
                    );
                }

                .submenu-wrapper {
                    @apply py-4 px-4;
                }

                .submenu-viewport {
                    @apply border-b-0;
                }

                .submenu-list .atm-nav-link {
                    @apply text-white py-2;

                    &.active,
                    &:hover {
                        @apply opacity-75;
                    }
                }

                .submenu-list .active .atm-nav-link {
                    @apply mt-0 border-b-0 font-bold;
                }
            }
        }

        .faq-nav-desktop {
            @apply hidden lg:block relative;

            @apply select-none;

            .faq-nav-wrapper {
                @apply p-16;
            }

            li {
                @apply text-white;
                @apply font-display;

                + li {
                    @apply mt-8;
                }

                > a {
                    @apply relative inline-block;
                    @apply hover:opacity-75;

                    .atm-icon {
                        @apply absolute hidden;
                        @apply left-0;
                        @apply mt-1;
                        top: 4.5px;
                    }
                }

                &.active {
                    @apply font-bold;

                    > a {
                        @apply text-white;
                        @apply pl-3;

                        .atm-icon {
                            @apply block;
                        }
                    }
                }
            }
        }
    }

    .faq-panel {
        @apply w-full;

        details {
            @apply border-b border-solid border-gray-200;

            summary {
                @apply cursor-pointer;
                @apply list-none;
                @apply flex justify-between text-left w-full;
                @apply py-6;
                border: none;

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

                & > * {
                    @apply inline;
                    @apply pointer-events-none;
                }

                .atm-icon {
                    @apply mt-1 ml-4;

                    &.icon-open {
                        @apply inline;
                    }

                    &.icon-close {
                        @apply hidden;
                    }
                }
            }

            .card-body {
                @apply pb-4;
                @apply w-11/12;
            }

            &[open] {
                summary {
                    .icon-open {
                        @apply hidden;
                    }

                    .icon-close {
                        @apply inline;
                    }
                }
            }
        }
    }
}