.demo {
	display: grid;
}

.demo-notes {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	font-size: 13px;
	line-height: 1.2;
}
.demo-notes > div {
	position: absolute;
	width: 100px;
	text-align: right;
	cursor: pointer;
}
.demo-notes > div > b {
	font-weight: normal;
	display: inline-block;
	padding: 0 2px;
	white-space: nowrap;
}
.demo-notes > .active > b {
	font-weight: 450;
	background: hsl(56 100% 72%);
}

.demo-images {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	margin-left: 110px;
}
.demo-images img {
	-webkit-user-drag: none;
}
#overview-image {
	transition: opacity 0.5s;
	display: block;
}
.demo-overlays {
	position: absolute;
	top: 0;
	left: 0;
	user-select: none;
}
.demo-overlays > img {
	position: absolute;
	visibility: hidden;
}
.demo-overlays > img.active {
	visibility: visible;
	transform-origin: center center;
}

@media all and (max-width: 620px) {
	.demo-notes {
		left: 8px;
	}
	.demo-images {
		margin-left: 118px;
	}
}