.gallery__product-view-vertical {
	display: flex;
	gap: 1rem;
	container-type: inline-size;
	width: 100%;
	height: 25cqw;
	--thumb-size: 4.375rem;
	--thumb-whitespace: 0.5rem;
	user-select: none;
	position: relative;
	align-items: center;

	.thumbnails {
		&:not(.swiper-initialized) .swiper-wrapper {
			display: flex;
			flex-direction: column;
			overflow: hidden;

			.swiper-slide {
				height: calc(25% - var(--thumb-whitespace));
				margin-bottom: calc(var(--thumb-whitespace) * 4 / 3);
				@media (max-width: 860px) {
					height: 100%;
					width: calc(25% - var(--thumb-whitespace));
					margin-bottom: unset;
					margin-right: calc(var(--thumb-whitespace) * 4 / 3);
				}
			}
			@media (max-width: 860px) {
				flex-direction: row;
			}
		}
		--border-size: 2px;

		width: var(--thumb-size);
		min-width: var(--thumb-size);
		max-width: var(--thumb-size);
		height: calc(
			100% -
			var(--swiper-navigation-size, 2.75rem) *
			2 -
			calc(var(--thumb-whitespace) * 2)
		);
		padding: 2px;

		@media (max-width: 860px) {
			width: calc(100cqw - (1.875rem * 2));
			min-width: calc(100cqw - (1.875rem * 2));
			max-width: calc(100cqw - (1.875rem * 2));
			height: 140px;
		}
		.swiper-slide-thumb-active {
			border: var(--border-size) solid var(--blue);
		}

		.swiper-slide:not(.swiper-slide-thumb-active) {
			border: var(--border-size) solid var(--color-gray);
		}

		.swiper-slide:hover {
			border-color: var(--color-dark-gray);
		}
	}

	.gallery {
		width: calc(100% - var(--thumb-size));
		height: 100%;
		margin-bottom: 0;
		.swiper-slide:hover {
			background-color: var(--color-gray-60);
		}
		img {
			min-height: 100%;
		}
		@media (max-width: 860px) {
			width: 100%;
		}
	}

	.swiper-slide {
		container-type: inline-size;
		cursor: pointer;
		border-radius: 0.5rem;
		padding: 0.2rem;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.2s linear;

		img {
			max-width: 100%;
			max-height: 100%;
			object-fit: contain;
			display: flex;
			mix-blend-mode: multiply;
		}
	}

	.swiper-button-prev {
		top: 0;
		left: 0;
		transform: rotate(180deg) translateX(calc(var(--thumb-size) / 2 * -1));
		color: var(--color-black);
		margin-top: 0;
		@media (max-width: 860px) {
			top: unset;
			bottom: 0;
			left: 0;
			transform: rotate(90deg) translateX(calc(var(--thumb-size) / 2 * -1));
		}
	}

	.swiper-button-next {
		bottom: 0;
		left: 0;
		transform: translateX(calc(var(--thumb-size) / 2));
		top: unset;
		@media (max-width: 860px) {
			bottom: 0;
			left: unset;
			right: 0;
			transform: rotate(-90deg) translateX(calc(var(--thumb-size) / 2));
		}
	}

	@media (max-width: 1550px) {
		height: 28cqw;
	}
	@media (max-width: 1270px) {
		height: 34cqw;
	}
	@media (max-width: 1080px) {
		height: 50cqw;
	}
	@media (max-width: 860px) {
		flex-direction: column-reverse;
		height: unset;
	}
}