/**
    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.
 */
@media (min-width: 992px) {
    @container container (max-width: 1100px) {
        .container-fluid:has(.card-group):not(.form-newsletter) {
            .card-50 {
                --card-width: 100% !important;
                --card-body-line-clamp: 4 !important;
                --card-figure-width: 30% !important;
            }
        }
    }
}

.burger-menu[open] {
    @starting-style {
        --burger-transform: translateX(100%);

        &::backdrop {
            --background-opacity: 0;
        }
    }
}