.sow-image-container.ward-so-parallelogram-gear-container {
	position: relative;
	overflow: visible;
	isolation: isolate;
}

.sow-image-container.ward-so-parallelogram-gear-container .ward-so-parallelogram-gear-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
	z-index: 0;
}

.sow-image-container.ward-so-parallelogram-gear-container .ward-so-parallelogram-gear-wrap > img.ward-so-parallelogram-gear-img {
	position: relative;
	display: block;
	z-index: 1;
}

.ward-so-parallelogram-gear {
	--ward-hex-colour: #d4d4d4;
	--ward-hex-opacity: 0.38;
	--ward-hex-side-inset: 30px;
	--ward-hex-height-overhang: 105px;

	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(100% - var(--ward-hex-side-inset));
	height: calc(100% + var(--ward-hex-height-overhang));
	max-width: calc(100% - var(--ward-hex-side-inset));
	transform: translate3d(-50%, -50%, 0) rotate(0deg);
	transform-origin: 50% 50%;
	pointer-events: none;
	z-index: 0;
	opacity: var(--ward-hex-opacity);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M 128 14 L 222 68 L 222 188 L 128 242 L 34 188 L 34 68 Z' fill='none' stroke='%23d4d4d4' stroke-width='7' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	animation: ward-so-hex-spin 18s linear infinite;
	animation-play-state: paused;
}

.ward-so-parallelogram-gear.ward-so-hex-is-visible {
	animation-play-state: running;
}

@keyframes ward-so-hex-spin {
	from {
		transform: translate3d(-50%, -50%, 0) rotate(0deg);
	}
	to {
		transform: translate3d(-50%, -50%, 0) rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ward-so-parallelogram-gear {
		animation: none;
	}
}