padding and margin theme values look strange

[Chris-SP365]

Hi,

while debugging a display issue with IOS I encountered that the default values don't look right:

:host([theme~="margin"]) {
    margin: 1em;
}
:host([theme~="padding"]) #grid-layout-element {
    padding: 1em 1em 0 1em;
}
:host([theme~="margin"]) #grid-layout-element {
    margin: var(--lumo-space-m);
}
:host([theme~="padding"]) #grid-layout-element {
    padding: var(--lumo-space-m);
}

Theme "margin" sets margin on two elements => it gets way too big.
Theme "padding" has 2 css styles targeting grid-layout-element.