input.larger {
			width: 30px;
			height: 20px;
		}

		.box {
			-webkit-box-shadow: 0 0 5px 2px gray;
			-moz-box-shadow: 0 0 5px 2px gray;
			box-shadow: 0 0 5px 2px gray;
		}

		.content__item {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			counter-increment: itemcounter;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;
		}

		.link--elara {
			font-family: aktiv-grotesk-extended, sans-serif;
			font-size: 1.375rem;
		}

		.link--elara::before {
			transform-origin: 50% 100%;
			transition: clip-path 0.3s, transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
			clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 0%);
		}

		.link--elara:hover::before {
			transform: translate3d(0, 2px, 0) scale3d(1.08, 3, 1);
			clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 0, 50% 0, 50% 100%, 50% 100%, 0 100%, 100% 100%, 100% 0%);
		}

		.link--elara span {
			display: inline-block;
			transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
		}

		.link--elara:hover span {
			transform: translate3d(0, -2px, 0);
		}

		.content__item::before {
			color: var(--color-number);
			position: absolute;
			top: 0;
			left: 0;
			
		}

		.link {
			cursor: pointer;
			font-size: 18px;
			position: relative;
			white-space: nowrap;
			color: var(--color-text);
		}

		.link::before,
		.link::after {
			position: absolute;
			width: 100%;
			height: 1px;
			background: currentColor;
			top: 100%;
			left: 0;
			pointer-events: none;
		}

		.link::before {
			content: '';
			/* show by default */
		}