/* Yleinen mobiilioptimointi */
@media (max-width: 1250px) {
    :root {
        --min-vertical-padding: 30px;
        --viewport-width-px: 800px;
        --viewport-width: min(100vw, var(--viewport-width-px));
        --absolute-max-render-area: calc(var(--viewport-width-px) - calc(2 * var(--min-vertical-padding)));
        --max-render-area: min(calc(var(--viewport-width) - calc(2 * var(--min-vertical-padding))), var(--absolute-max-render-area));
        --vertical-padding: calc((100vw - var(--max-render-area)) / 2);
        --render-area: calc(100vw - calc(2 * var(--vertical-padding)));
    }

    body,html {
        font-size: 20px;
    }
}
@media (max-width: 1000px) {
    :root {
        --min-vertical-padding: 30px;
        --viewport-width-px: 600px;
        --viewport-width: min(100vw, var(--viewport-width-px));
        --absolute-max-render-area: calc(var(--viewport-width-px) - calc(2 * var(--min-vertical-padding)));
        --max-render-area: min(calc(var(--viewport-width) - calc(2 * var(--min-vertical-padding))), var(--absolute-max-render-area));
        --vertical-padding: calc((100vw - var(--max-render-area)) / 2);
        --render-area: calc(100vw - calc(2 * var(--vertical-padding)));
    }
    body,html {
        font-size: 18px;
    }
}
@media (max-width: 780px) {
    :root {
        --min-vertical-padding: 30px;
        --viewport-width-px: 400px;
        --viewport-width: min(100vw, var(--viewport-width-px));
        --absolute-max-render-area: calc(var(--viewport-width-px) - calc(2 * var(--min-vertical-padding)));
        --max-render-area: min(calc(var(--viewport-width) - calc(2 * var(--min-vertical-padding))), var(--absolute-max-render-area));
        --vertical-padding: calc((100vw - var(--max-render-area)) / 2);
        --render-area: calc(100vw - calc(2 * var(--vertical-padding)));
    }
    body,html {
        font-size: 18px;
    }
}