.collection-card {
	display: block;
	--transition-direction: 1;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	overflow: hidden;
	aspect-ratio: 480 / 580;

	@media (width > 1000px) {
		scroll-snap-align: none;
	}

	&:hover .collection-card__video {
		opacity: 1;
	}

	@media screen and (pointer: fine) {
		&:hover {
			.collection-card__content {
				transform: translateY(calc(var(--transition-direction) * -56px) );
			}

			.collection-card__content-wrapper svg {
				opacity: 1;
				visibility: visible;
				transform: translateY(10px);
			}
		}
	}

	&[class*="--mobile-landscape"] {
		@media (width < 1000px) {
			aspect-ratio: 440 / 193;
		}
	}

	.content-over-media {
		height: 100%;
		--content-over-media-overlay: transparent;

		&.has-solid-overlay {
			--content-over-media-overlay: rgba(0, 0, 0, var(--overlay-opacity));
		}

		&.has-gradient-overlay {
			--content-over-media-overlay: linear-gradient(218.23deg, rgba(0, 0, 0, 0) 55.5%, rgba(0, 0, 0, var(--overlay-opacity)) 77.97%);

			@media (width >= 1000px) {
				--content-over-media-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0) 67.57%, rgba(0, 0, 0, var(--overlay-opacity)) 100%);
			}
		}
	}

	.collection-card__content-wrapper {
		@media (width < 1000px) {
			place-self: end start;
			margin-bottom: 5px;
		}
		@media (width >= 1000px) {
			place-self: end center;
			text-align: center;
		}

		svg {
			opacity: 0;
			visibility: hidden;
			transition: opacity .2s, visibility .2s, transform .2s;
			display: inline-block;
		}
	}

	.collection-card__content {
		+ svg {
			transform: translateY(calc(var(--transition-direction) * 20px) );
		}
	}

	.collection-card__content {
		transition: transform .2s;

		&:first-child {
			margin-block-end: -3rem;
		}
	}

	.collection-card__image {
		position: absolute;
	}

	.collection-card__video {
		position: absolute;
		opacity: 0;
		transition: opacity 1s ease-in-out;
	}
}