:root{--sprite24-path: url(/img/icon-pack24--px.png);--sprite48-path: url(/img/icon-pack48--px.png);--sprite-position: calc(var(--sprite-position-x) * -48px + 48px) calc(var(--sprite-position-y) * -48px + 48px)}.atlas{--sprite-size: 48px;--sprite-position-x: 1;--sprite-position-y: 1;--sprite24-path: url(/img/icon-pack24--px.png);--sprite48-path: url(/img/icon-pack48--px.png);--sprite-position: calc(var(--sprite-position-x) * (var(--sprite-size) * -1) + var(--sprite-size)) calc(var(--sprite-position-y) * (var(--sprite-size) * -1) + var(--sprite-size))}.container-test{float:left;margin-right:1rem;height:64px;width:64px;background-color:var(--clr-background);background-position:var(--sprite-position)}.container-test.small{--sprite-size: 24px;background-position:var(--sprite-position);background-image:var(--sprite24-path);height:24px;width:24px}.container-test.large{background-image:var(--sprite48-path);height:48px;width:48px}.container-test.too-large{background-image:var(--sprite48-path)}