#references-container {
	display: flex;
	flex-direction: column;
	width: min(90%, 1200px);
	max-width: 1200px;
	margin: 0 auto;
	gap: 1.5rem;
	padding: 2rem 0;
}



.title_ref {
	font-size: 1.8em;
	text-align: center;
	display: block;
	padding-bottom: 10px;
	margin-bottom: 0.5rem;
	font-family: STIX Two Text;
	color: #b8b6ff;
	font-weight: bold;
	position: relative;
	transition: transform 0.3s ease, color 0.3s ease;
}



.title_ref::after {

	content: '';

	position: absolute;

	bottom: 10px;

	left: 50%;

	transform: translateX(-50%);

	width: 0;

	height: 3px;

	background: linear-gradient(to right, transparent, #0077E5, transparent);

	transition: width 0.5s ease;

}



.title_ref:hover::after {

	width: 400px;

}



.title_ref:hover {

	transform: scale(1.05);

	color: #0077E5;

}



.block_ref {
	padding: 1.5rem;
	background: rgba(13, 18, 36, 0.4);
	border-radius: 12px;
	border: 1px solid rgba(156, 158, 255, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}



.block_ref:hover {

	transform: translateY(-5px);

	box-shadow: 0 8px 25px rgba(0, 119, 229, 0.2);

	border-color: rgba(156, 158, 255, 0.3);

}



.youtube-container {

	position: relative;

	width: 100%;

	aspect-ratio: 16 / 9;

	border-radius: 8px;

	overflow: hidden;

	cursor: pointer;

	background: #000;

}



.youtube-thumbnail {

	width: 100%;

	height: 100%;

	object-fit: cover;

	display: block;

	transition: transform 0.3s ease, filter 0.3s ease;

}



.youtube-container:hover .youtube-thumbnail {

	transform: scale(1.05);

	filter: brightness(0.7);

}



.youtube-play-btn {

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	background: transparent;

	border: none;

	cursor: pointer;

	padding: 0;

	transition: transform 0.3s ease, opacity 0.3s ease;

	z-index: 1;

}



.youtube-play-btn:hover {

	transform: translate(-50%, -50%) scale(1.1);

}



.youtube-play-btn svg {

	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));

	transition: filter 0.3s ease;

}



.youtube-container:hover .youtube-play-btn svg {

	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.7));

}



.block_iframe_ref {

	display: block;

	margin: 0 auto;

	border-radius: 8px;

	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

	transition: box-shadow 0.3s ease, transform 0.3s ease, filter 0.3s ease;

	max-width: 100%;

	width: 100%;

	height: auto;

	aspect-ratio: 16 / 9;

	border: none;

}



.block_iframe_ref:hover {

	box-shadow: 0 8px 25px rgba(0, 119, 229, 0.6);

}



.block_ref img {

	max-width: 100%;

	height: auto;

	border-radius: 8px;

	transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.block_ref img:hover {

	transform: scale(1.05);

	box-shadow: 0 8px 25px rgba(0, 119, 229, 0.3);

}



.block_ref .thq-link {

	margin-top: 0.5rem;

}



.block_ref .thq-link a {

	color: #8180f9;

	transition: color 0.3s ease;

	text-decoration: none;

}



.block_ref .thq-link a:hover {

	color: #0077E5;

}



@media (max-width: 768px) {

	.block_ref {
	padding: 1.5rem;
	background: rgba(13, 18, 36, 0.4);
	border-radius: 12px;
	border: 1px solid rgba(156, 158, 255, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

	

	.title_ref {
	font-size: 1.8em;
	text-align: center;
	display: block;
	padding-bottom: 10px;
	margin-bottom: 0.5rem;
	font-family: STIX Two Text;
	color: #b8b6ff;
	font-weight: bold;
	position: relative;
	transition: transform 0.3s ease, color 0.3s ease;
}

	

	.block_iframe_ref {

		width: 100%;

	}

}