.dc26-animated-image {
	max-width: 100%;
	position: relative;
	min-height: 200px;
	background-repeat: repeat;
	background-size: var(--tile-size, 200px) var(--tile-size, 200px), var(--tile-size, 200px) var(--tile-size, 200px);
	background-position: 0 0, 0 0;
	overflow: hidden;
	will-change: background-position;
}

.dc26-animated-image img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0;
}

.dc26-animated-image.animate-slide-up {
	animation: dc26-slide-up var(--animation-speed, 15s) linear infinite;
}

.dc26-animated-image.animate-slide-down {
	animation: dc26-slide-down var(--animation-speed, 15s) linear infinite;
}

.dc26-animated-image.animate-slide-left {
	animation: dc26-slide-left var(--animation-speed, 15s) linear infinite;
}

.dc26-animated-image.animate-slide-right {
	animation: dc26-slide-right var(--animation-speed, 15s) linear infinite;
}

@keyframes dc26-slide-left {
	from {
		background-position: 0 0, 0 0;
	}
	to {
		background-position: calc(-1 * var(--tile-size, 200px)) 0, calc(-1 * var(--tile-size, 200px)) 0;
	}
}

@keyframes dc26-slide-right {
	from {
		background-position: calc(-1 * var(--tile-size, 200px)) 0, calc(-1 * var(--tile-size, 200px)) 0;
	}
	to {
		background-position: 0 0, 0 0;
	}
}

@keyframes dc26-slide-up {
	from {
		background-position: 0 0, 0 0;
	}
	to {
		background-position: 0 calc(-1 * var(--tile-size, 200px)), 0 calc(-1 * var(--tile-size, 200px));
	}
}

@keyframes dc26-slide-down {
	from {
		background-position: 0 calc(-1 * var(--tile-size, 200px)), 0 calc(-1 * var(--tile-size, 200px));
	}
	to {
		background-position: 0 0, 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dc26-animated-image {
		animation: none !important;
	}
}