town-page/_assets/styles/sequencer.scss

.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%;
	}
}