.video-index {
	gap: 24px;
	display: flex;
}

.fstvid {
	height: 360px;
	min-width: 660px;
	
	display: flex;
	flex-direction: column;
	gap: 17px;
}

.fstvid iframe {
	border-radius: 8px;
}

.subvid {
	margin-bottom: 42px;
}

.subvid a {
	gap: 17px;
	display: flex;
}

.subvid a img {
	border-radius: 4px;
}

/* mobile */
@media (max-width: 768px) {

	.fstvid {
		min-width: 100%;
	}

	.video-index {
		flex-wrap: wrap;
	}

	.subvid h3 {
		height: 90px;
		overflow: hidden;
		font-size: 1rem;
	}

	.subvid a {
		align-items: center;
	}

}

.subvid a {
	position: relative;
	display: flex;
	text-decoration: none; 
	color: inherit;
}

/* yt red button */
.subvid a::before {
	content: "";
	position: absolute;

	left: 60px; /* Metà di 120 */
	top: 45px;  /* Metà di 90 */
	transform: translate(-50%, -50%);

	width: 40px; 
	height: 28px;
	background-color: rgba(255, 0, 0, 0.8);
	border-radius: 6px;
	z-index: 10;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

/* yt triangolo bianco */
.subvid a::after {
	content: "";
	position: absolute;

	left: 60px;
	top: 45px;
	transform: translate(-50%, -50%);

	/* triangolo */
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent #ffffff;

	z-index: 11;
	pointer-events: none;
}

.subvid a:hover::before {
	background-color: #FF0000;
	transform: translate(-50%, -50%) scale(1.1);
}

.subvid img {
  display: block;
}

/* Tablets: Portrait + Landscape */
@media (min-width: 600px) and (max-width: 1024px) { 

	.video-index {
		flex-wrap: nowrap;
	}

	.fstvid {
		min-width: 50%;
	}

	.rxvids {
		width: 50%;
	}

}

/* Mobile */
@media (max-width: 768px) {

	.subvid {
		margin-bottom: 0;
	}

	/* yt red button */
	.subvid a::before {
		top: 55px
	}

	/* yt triangolo bianco */
	.subvid a::after {
		top: 55px;
	}

}