:root{
  --mx-size-small: 20px;
  --mx-size-normal: 30px;
  --mx-size-big: 50px;
  --mx-icon-size: 48px;
  --mx-swipe-arrow-offset: var(--mx-size-small);
}

mx-panel{display: flex;}
mx-panel.column{flex-direction: column;}
/* .center — только вертикальное выравнивание (для column) */
mx-panel.center{align-items: center;}
/* .centered — по обеим осям */
mx-panel.centered{justify-content: center; align-items: center;}
mx-panel.small{gap: var(--mx-size-small);}
mx-panel.normal{gap: var(--mx-size-normal);}
mx-panel.big{gap: var(--mx-size-big);}
mx-panel.small:not(.inner){padding: var(--mx-size-small);}
mx-panel.normal:not(.inner){padding: var(--mx-size-normal);}
mx-panel.big:not(.inner){padding: var(--mx-size-big);}
mx-panel.min100{min-width: 100%;}

mx-panel.centered.p100{
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    width: 100dvw;
}
mx-panel.max{
    justify-content: space-between;
    width: 90vw;
    width: 90dvw;
}

mx-swipe{
    position: relative;
    overflow: hidden;
    display: flex;
}
mx-swipe > *:not(.icon) {
    flex: 0 0 100%;
}
mx-swipe > .icon {
    position: absolute;
    top: calc(50% - var(--mx-icon-size) / 2);
    font-size: var(--mx-icon-size);
    cursor: pointer;
    color: white;
    text-shadow: 0 0 20px black;
    width: var(--mx-icon-size);
}
mx-swipe > .icon.left  { left: var(--mx-swipe-arrow-offset); }
mx-swipe > .icon.right { right: var(--mx-swipe-arrow-offset); }