.nav-list {
    @apply z-10 left-0 min-w-max pointer-events-none bg-white;
    top: 30px;

    display: block;
    opacity: 1;

    .subnav-items {
        .subnav-item {
            @apply hover:bg-red hover:text-white;

            max-width: 240px;

            > a {
                @apply block hover:bg-red hover:text-white;

                font-size: 1.125rem;
                line-height: 1.875rem;

                .icon {
                    @apply mr-2;
                }
            }
        }
    }

    .subnav-footer {
        @apply bg-gray-400;

        padding: 12px 24px;
    }

    &.subnav-cols {
        width: 100%;

        .subnav-items {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            grid-gap: 0 50px;

            @screen 2xl {
                width: 100%;
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                grid-gap: 0 50px;
            }
        }

        .subnav-items-favo {
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

            @screen xl {
                width: 100%;
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                grid-gap: 0 50px;
            }
        }
    }
}