@layer utilities {
	.video-wrapper {
		height: 100%;
		overflow: hidden;
		position: absolute;
		width: 100%;
		grid-column: full;
	}

	.video-wrapper iframe {
		border: none;
		pointer-events: none;
		position: absolute;
		min-height: 100%;
		min-width: 100%;
		z-index: 0;
	}

	.video-wrapper .video-actions {
		--row-gap: var(--column-gap);

		bottom: var(--column-gap);
		left: var(--row-gap);
		margin: 0 auto;
		position: absolute;
		right: var(--row-gap);
		text-align: right;
	}

	.video-wrapper .video-control {
		display: inline-block;
		background: none;
		border-radius: 50%;
		border: 1px solid white;
		color: white;
		cursor: pointer;
		font-size: .875em;
		text-align: center;
		height: 2em;
		width: 2em;
		transition: color .3s, border-color .3s;
	}

	.video-wrapper .video-control:hover {
		color: blue;
		border-color: blue;
	}
}