.sequencer-baseline { position:relative; } .sequencer-wrapper { position: absolute; width: 100%; margin-top: 12%; } .sequencer { display: grid; margin: 0 auto; grid-template-columns: repeat(8, 1fr); transform: rotate(30deg) skew(-30deg); left: 25%; width: 60%; } .sequencer-button { -moz-appearance: none; -webkit-appearance: none; transform: skew(30deg) rotate(-30deg); background-image: asset_url("Neon_Cube_01_190513_v01-02.png");; padding-bottom: 78%; margin: 12% -10%; background-size: cover; background-position: 0 100%; &:checked { background-position: 0 33.33%; } }