:root {
    --ratio: 1.5;
    --measure: 75ch;
    --s-4: calc(var(--s-3)) / (var(--ratio));
    --s-3: calc(var(--s-2)) / (var(--ratio));
    --s-2: calc(var(--s-1)) / (var(--ratio));
    --s-1: calc(var(--s0)) / (var(--ratio));
    --s0: 1rem;
    --s1: calc(var(--s0) * var(--ratio));
    --s2: calc(var(--s1) * var(--ratio));
    --s3: calc(var(--s2) * var(--ratio));
    --s4: calc(var(--s3) * var(--ratio));
    font-size: calc(var(--s0) + 0.5vw);
}

* {
    box-sizing: border-box;
    max-inline-size: var(--measure);
}

html,
body,
div,
header,
nav,
main,
footer {
    max-inline-size: none;
}

.box {
    padding: var(--s-1);
    outline: 0.125rem solid transparent;
    outline-offset: -0.125rem;
}

.center {
    box-sizing: content-box;
    max-inline-size: var(--measure);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.switcher {
    --threshold: 30rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1)
}

.switcher > * {
    flex-grow: 1;
    flex-basis: calc((var(--threshold) - 100%) * 999);
}