.lock {
	user-select: none;
	box-sizing: border-box;
	display: inline-flex;
	position: relative;
	justify-content: space-between;
	font-family: "Times New Roman", Times, serif;
	margin: 0 0 30px;
	--rotationSpeed: .5s;
	--wheelColor: #BBB;
	
	height:var(--diameter);
}

.lock .wheel {
	perspective: 200px;
	width: calc(var(--diameter) / 2);
	margin-right: 15px;
	transform-style: preserve-3d
}

.lock .wheel:after,
.lock .wheel:before {
	position: absolute;
	width: 100%;
	left: 0;
	height: 50%;
	right: 0;
	backdrop-filter: blur(0.8px);
	z-index: 10
}

.lock .wheel:before {
	top: calc(var(--elementHeight) * -0.6);
	background: linear-gradient(to bottom, #000A, transparent)
}

.lock .wheel:after {
	bottom: calc(var(--elementHeight) * -0.6);
	background: linear-gradient(to top, #000A, transparent)
}

.lock .wheel .wheel__inner {
	position: relative;
	margin: 0 auto;
	transform-style: preserve-3d;
	transition: transform var(--rotationSpeed) cubic-bezier(1, 0, 0.44, 0.99);
	border-right: 10px solid transparent
}

.lock .wheel .wheel__inner .wheel__segment {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 50%;
	background-color: var(--wheelColor);
    width: calc(var(--diameter) * 2 / 3);
	box-shadow: 0px 0 4px -2px inset #52525273, 1px 0 0px inset #0003, -1px 0 0px inset #0003
}

.lock .wheel .wheel__inner .wheel__segment span {
	padding-top: 3px;
	text-shadow: rgba(245, 245, 245, .5) 1px 1px 1px;
	background-clip: text;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	font-weight: bold;
	background-color: #000;
	color: #0005;
	font-size: calc(var(--elementHeight) * 0.6);
	width: 100%
}

.lock .wheel:last-child {
	width: 46px
}