/**
    this file is, due to old gulp workflow and cleanCss plugin, which breaks on container queries.
    the container query is a "nice to have" to make sure, that the card layout in a LG container
    has in specific container widths a better layout.
 */
.main-nav:popover-open {
    @starting-style {
        --main-nav-transform: translateX(100%);

        &::backdrop {
            --main-nav-backdrop-background: transparent;
        }
    }
}
.main-nav__subnav {
    &:popover-open {
        @starting-style {
            --nav-subnav-transform: translateX(100%);
        }
    }

    .main-nav__subnav {
        transform: var(--nav-subnav-2-transform, translateX(100%));

        &:popover-open {
            --nav-subnav-2-transform: translateX(0);

            @starting-style {
                --nav-subnav-2-transform: translateX(100%);
            }
        }
    }
}