.video-card__player,
.video-card__frame {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: var(--cl-dark);
}

.video-card__player {
	padding: 0;
	border: 0;
	cursor: pointer;
}

.video-card__player img {
	object-fit: cover;
	transition: transform .5s var(--trns-ease);
}

.video-card__player:hover img,
.video-card__player:focus-visible img {
	transform: scale(1.04);
}

.video-card__player:focus-visible {
	outline: 3px solid var(--cl-btn-primary);
	outline-offset: 3px;
}

.video-card__play {
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 6.4rem;
	height: 6.4rem;
	border-radius: 50%;
	color: #fff;
	background-color: var(--cl-btn-primary);
	box-shadow: 0 .6rem 2rem rgba(0, 0, 0, .25);
	transform: translate3d(-50%, -50%, 0);
	transition: transform var(--trns-timing) var(--trns-ease);
}

.video-card__player:hover .video-card__play,
.video-card__player:focus-visible .video-card__play {
	transform: translate3d(-50%, -50%, 0) scale(1.1);
}

.video-card__play svg {
	width: 45%;
	height: 45%;
	margin-left: 8%;
}

.video-card__frame {
	overflow: hidden;
}

.video-card__frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.video-card__title {
	margin-top: 1em;
}

.video-card__text {
	margin-top: .5em;
	opacity: .8;
}

@media (min-width: 992px) {
	.video-card__play {
		width: 8rem;
		height: 8rem;
	}
}