#mainmenu > li > div.submenu {  }


#mainmenu > li > div.submenu p{
    width: 100%;
    font-size: 48px; line-height: 1.2; font-weight: 600;  margin: 0 0 32px;
}
#mainmenu > li > div.submenu a {
    font-weight: 700; color: inherit;

}

div.submenu > p a::after,
div.submenu > ul > li > a span::after{
    font-family: esero;
content:"\e800"; margin-left: 0.5em;
}
div.submenu > p a::after { font-size: 0.75em;}



div.submenu > ul > li {

    padding: 0 0 2em;
    font-size: 20px; font-weight: 700;
    line-height: 140%;

    break-inside: avoid-column;
}
div.submenu > ul > li:last-child {
    padding: 0 0 0;
}

div.submenu > ul > li li {

    padding: 1.5em 0 0;
    font-size: 14px; font-weight: 400;
    line-height: 140%;

    break-inside: avoid-column;
}




/*
@media all and (max-width: 1023.98px) {
*/
@media all and (max-width: 1099.98px) {
    #mainmenu > li > div.submenu {/*display: none;*/  }

    div.submenu > ul > li { font-size: 16px; }
    #mainmenu > li > div.submenu p{

        font-size: 24px; line-height: 1.2; font-weight: 600;  margin: 0 0 1.20em;

    }
    #mainmenu > li > div.submenu { background-color: inherit; border-radius: 0; padding:0;  /*padding: var(--section-padding) 0 ;*/ }
    #mainmenu > li > div.submenu::before,
    #mainmenu > li > div.submenu::after
    {    height: var(--section-padding); display: block; content: "";  width: 100%;}
    #mainmenu > li > div.submenu > :is(p,ul) { padding: 0 var(--section-padding); width: 100%; }
    /*#mainmenu > li > div.submenu > :is(p) { margin-bottom: var(--section-padding); }*/
}




@media all and (min-width: 900px) {
    #mainmenu .submenu>ul {
        flex: 1;
        column-count: 1;
        column-gap: var(--gutter);
        position: relative; background: green;
    }

    #mainmenu .submenu>ul.morethan4 {
        column-count: 2; background: red;
    }
}