.videos {
	text-align: center;
	background-color: var(--background3);
	padding: var(--global-v-spacing) var(--global-h-spacing);
}

.videos-window {
	position: relative;
	width: 100%;
	margin: auto;
	overflow: hidden;
}

.video-list {
	display: flex;
	transition: transform 0.5s ease-in-out;
}

.video-card {
	flex: 0 0 calc(100% / 3); /* show 3 videos at a time */
	box-sizing: border-box;
	padding: 10px;
	text-align: center;
	transition: all 0.5s;
}

.video-card iframe {
	margin: 0 20px;
	width: 100%;   /* responsive, fills card */
	aspect-ratio: 16/9;
	border-radius: 8px;
	transition: transform 0.3s, box-shadow 0.3s;
}

.video-card.video-active {
	flex: 0 0 calc(100% / 3 * 2);
}

.video-card.video-active iframe {
	aspect-ratio: 16/9;
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
	z-index: 2;
	position: relative;
}

.carousel-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0,0,0,0.5);
	color: #fff;
	border: none;
	font-size: 20px;
	cursor: pointer;
	padding: 10px;
	border-radius: 50%;
	z-index: 2;
}

.carousel-btn.left {
	left: 10px;
}

.carousel-btn.right {
	right: 10px;
}