.subnav {
    @apply z-10 min-w-max bg-white;

    display: block;
    opacity: 1;

    .subnav-items {
        @apply p-6;

        .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: 24px;

            @screen 2xl {
                width: 1472px;
                grid-template-columns: repeat(6, 1fr);
            }
        }
    }
}