:root {
    --resolution-design-width: 2200px;
    --resolution-design-height: 1440px;
    --resolution-scale: 1;
}

body.resolution-adapted {
    --resolution-scale: 1;
    min-height: 100vh;
    height: auto;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: auto;
}

.resolution-wrapper {
    position: relative;
    width: var(--resolution-design-width);
    min-height: var(--resolution-design-height);
    transform-origin: top center;
    transform: scale(var(--resolution-scale));
    transition: transform 0.2s ease-out;
    will-change: transform;
}

.resolution-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

body.resolution-adapted {
    padding-bottom: max(calc(var(--resolution-design-height) * var(--resolution-scale) - var(--resolution-design-height)), 0px);
}

@media (orientation: landscape) {
    body.resolution-adapted {
        align-items: flex-start;
    }
}

@media (orientation: portrait) {
    body.resolution-adapted {
        align-items: flex-start;
    }
}