.menucontainer {
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
    padding: 1em;
    text-align: center;
}

@media screen and (min-width: 480px) {
    .menucontainer {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 800px) {
    .menucontainer {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (min-width: 1240px) {
    .menucontainer {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media screen and (min-width: 1920px) {
    .menucontainer {
        grid-template-columns: repeat(10, 1fr);
    }
}

.menubutton {
    padding: 0.5em;
    padding-top: 1em;
    padding-bottom: 1em;

    border-color: var(--backend-menubutton-border-color);
    border-style: solid;
    border-width: 0.01rem;
    border-radius: 1em;

    box-shadow: var(--backend-box-shadow);
    text-decoration: none;
}

.menubutton:hover {
    box-shadow: var(--backend-box-shadow-hover);
}

.menubutton .description {
    color: var(--backend-font-color);;
}

.menubutton .symbol {
    min-height: 4em;
    
}