.hover-split__gallery {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100cqw;
	aspect-ratio: 1 / 1;
	cursor: pointer;
	border-radius: 1rem;
	overflow: hidden;
	background-color: #fff;
	box-sizing: border-box;
	padding-bottom: 0.5rem;
	user-select: none;
	ul {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		width: 95cqw;
		height: 1.5rem;
		z-index: 3;
		position: absolute;
		bottom: 0;
		padding: 0;
		margin: 0;

		list-style-type: none;
		gap: 0.5ch;
		li {
			width: 0.5rem;
			aspect-ratio: 1 / 1;
			transition: all 0.2s linear;
			background-color: currentColor;
			color: #b9bcbe;
			display: block;
			border-radius: 1rem;

			&.active {
				color: #212121;
			}
		}
	}
	img {
		position: absolute;
		width: 85cqw;
		object-fit: contain;
		mix-blend-mode: multiply;
		border-radius: inherit;
		aspect-ratio: 1 / 1;

		&:not(.active) {
			display: none;
		}
	}

	&:not(.initialized) ul li:first-child {
		color: #212121;
	}
	&:not(.initialized) img:first-child {
		display: block;
	}
}