:root {
	--clr-neutral-900: hsl(207, 19%, 9%);
	--clr-neutral-100: hsl(0, 0%, 100%);
	--clr-accent-400: rgb(245, 134, 62);
}

*,
*::before,
*::after{
	box-sizing: border-box;
}

body{
	display: grid;
	max-height: 100px;
	place-items: center;
	line-height: 1.6;
	background: var(--clr-neutral900);
	font-family: sans-serif;
}

.card11 {
	colour: var(--clr-neutral100);
	background-image: url('images/index/VIDEO.jpg');
	background-size: cover;
	max-width: 50ch;
	border-radius: 0.5rem;
	overflow: hidden;
	transition: transform 500ms ease; padding-left:0; padding-right:0; padding-top:10rem; padding-bottom:0
}

.card11:hover,
.card11:focus-within {
	transform: scale(1.05);
}

.card11-content {
	--padding: 1.5rem;
	padding: var(--padding);
	background: linear-gradient(
		hsl(0 0% 0% / 0),
		hsl(20 0% 0% / 0.3) 20%,
		hsl(0 0% 0% / 1)
		);
}

@media (hover) {
	.card11-content {
				transform: translateY(65%);
		transition: transform 400ms ease;
		}
		.card11:hover .card11-content,
.card11:focus-within .card11-content {
	transform: translateY(0);
	transition-delay: 400ms;
	}

.card11:focus-within .card11-content {
	transition-duration: 0ms;
	}

.card11-content > *:not(.card11-title) {
	opacity: 0;
	transition: opacity 500ms linear;
	}

.card11:hover .card11-content > *:not(.card11-title),
.card11:focus-within .card11-content > *:not(.card11-title) {
	opacity: 1;
	transition-delay: 600ms;
	}
	
	.card11-title::after {
		transform: scaleX(0);
	}
}

.card11-title {
	position: relative;
	width: max-content;
	color: rgb(255 255 255);
}

.card11-title::after {
	content: "";
	position: absolute;
	height: 4px;
	left: calc(var(--padding) * -1);
	bottom: 0;
	width: calc(100% + var(--padding));
	background: var(--clr-accent-400);
	transform-origin: left;
	transition: transform 500ms ease
}

.card11:hover .card11-title::after,
.card11:focus-within .card11-title::after {
	transform: scaleX(1);
}

.card11-body {
	color: rgb(255 255 255 / 0.75);
}

.button11 {
	cursor: pointer;
	display: inline-block;
	text-decoration: none;
	color: var(--clr-neutral-900);
	background-color: var(--clr-accent-400);
	padding: 0.5em 1.25em;
	border-radius: 0.25rem;
}

.button11:hover,
.button11:focus {
	background-color: var(--clr-neutral-100);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms
		!important;
		animation-iteration-count: 1
		!important;
		transition-duration: 0.01ms
		!important;
		scroll-behavior: auto !important;
		transition-delay: 0ms !important;
		}
}