.de-portfolio-feed {
	--de-pf-gap: 12px;
	--de-pf-radius: 8px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--de-pf-gap);
	height: var(--de-pf-height, 100vh);
	max-height: var(--de-pf-height, 100vh);
	overflow: hidden;
	width: 100%;
	isolation: isolate;
}

.de-portfolio-feed__col {
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: max-content;
	will-change: transform;
}

.de-portfolio-feed__col--up {
	animation: de-pf-scroll-up var(--de-pf-speed-up, 40s) linear infinite;
}

.de-portfolio-feed__col--down {
	animation: de-pf-scroll-down var(--de-pf-speed-down, 55s) linear infinite;
}

.de-portfolio-feed__track {
	display: flex;
	flex-direction: column;
	gap: var(--de-pf-gap);
}

/* Gap between duplicated tracks matches item gap */
.de-portfolio-feed__col > .de-portfolio-feed__track + .de-portfolio-feed__track {
	margin-top: var(--de-pf-gap);
}

.de-portfolio-feed__item {
	display: block;
	overflow: hidden;
	border-radius: var(--de-pf-radius);
	aspect-ratio: 1 / 1;
	background: #111;
	flex-shrink: 0;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.de-portfolio-feed__item picture,
.de-portfolio-feed__item img {
	display: block;
	width: 100%;
	height: 100%;
}

.de-portfolio-feed__item img {
	object-fit: cover;
	object-position: center;
}

.de-portfolio-feed:hover .de-portfolio-feed__col--up,
.de-portfolio-feed:hover .de-portfolio-feed__col--down,
.de-portfolio-feed.is-paused .de-portfolio-feed__col--up,
.de-portfolio-feed.is-paused .de-portfolio-feed__col--down {
	animation-play-state: paused;
}

@keyframes de-pf-scroll-up {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(0, -50%, 0);
	}
}

@keyframes de-pf-scroll-down {
	from {
		transform: translate3d(0, -50%, 0);
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.de-portfolio-feed__col--up,
	.de-portfolio-feed__col--down {
		animation: none;
		transform: none;
	}

	.de-portfolio-feed__col--down .de-portfolio-feed__track[aria-hidden="true"] {
		display: none;
	}
}

@media (max-width: 767px) {
	.de-portfolio-feed {
		--de-pf-gap: 8px;
		--de-pf-radius: 6px;
	}
}