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_200209_v02-02.png");
	padding-bottom: 78%;
	margin: 12% -10%;
	background-size: cover;
	background-position: 0 100%;
	&:checked {
		background-position: 0 33.33%;
		&.activated {
				background-position: 0 0;
		}
	}
	&.activated {
		background-position: 0 66.66%;
	}
}