:root { --indent: 4.5rem; }          /* ≈0.5 in at default 16px, scales with root font size */

.i1 { margin-left: var(--indent); }
.i2 { margin-left: calc(var(--indent) * 2); }
.i3 { margin-left: calc(var(--indent) * 3); }
.i4 { margin-left: calc(var(--indent) * 4); }
.i5 { margin-left: calc(var(--indent) * 5); }

@media (max-width: 650px) {
    :root { --indent: 3.25rem; }          /* ≈0.5 in at default 16px, scales with root font size */
}

@media (max-width: 550px) {
    :root { --indent: 2.5rem; }          /* ≈0.5 in at default 16px, scales with root font size */
}

@media (max-width: 450px) {
    :root { --indent: 1.5rem; }          /* ≈0.5 in at default 16px, scales with root font size */
}