.main-menu {
    background:var(--color-green);
}
.main-menu > div > ul {
    display:grid !important;
    padding-top:4px;
    padding-bottom:4px;
}
.main-menu .width-limiter ul > li > :is(a, div) {
    display:flex;
    flex-direction: column;
    gap:5px;
    align-items: center;
    justify-content: center;
    color:var(--color-white);
    font-size:clamp(0.8em,1.1vw,1.1em);
    border-right:solid 1px var(--color-white);
    background:var(--color-green);
    transition:var(--transition);
    padding-top:6px;
    padding-bottom:4px;
}
.main-menu .width-limiter ul > li > :is(a, div) span {
    font-weight:bold;
}
.main-menu .width-limiter ul > li > :is(a, div) img {
    height:20px;
}
.main-menu .width-limiter ul > li:first-of-type > a {
    border-left:solid 1px var(--color-white);
}
.main-menu .width-limiter ul > li > :is(a, div):hover {
    background:#4DBC31;
}

.main-menu .sub-menu {
    background:var(--color-lightgreen);
    position:absolute;
    width:100dvw;
    top:100%;
}

@media (max-width: 920px) {
    .main-menu{
        width: 100%;
        display: grid;
        place-content: center;
    }
    
    .main-menu > div > ul{
        grid-template-columns: 1fr;
        gap:var(--gap);
    }

    .main-menu .width-limiter ul > li:first-of-type > a{
        border-left: none;
    }
    .main-menu .width-limiter ul > li > :is(a, div){
        border-right: none;
        flex-direction: row;
        gap:20px 10px;
    }
    .main-menu .width-limiter ul > li > :is(a, div){
		font-size: 1.1em;
	}
}
@media (max-width: 820px) {}
@media (max-width: 620px) {

}
@media (max-width: 520px) {

}
@media (max-width: 420px) {

}