@import "../bootstrap/scss/functions";
@import "../base/functions";
@import "../base/variables";
@import "../bootstrap/scss/variables";
@import "../bootstrap/scss/mixins";


// Base
.video {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: $white;
	box-shadow: $box-shadow-lg;
	cursor: pointer;
}

.video-image {
	width: 100%;
	transition: .3s;
}

.video-link {
	position: absolute;
}

.video-icon {
	color: $gray-900;
	background-color: $white;
}


// Spacing
* + .video {
	margin-top: px-to-rem( 40px );
}


// Contexts
.desktop {
	.video:hover {
		.video-image {
			opacity: .8;
		}
	}
}


// Media
@include media-breakpoint-up(lg) {
	* + .video {
		margin-top: px-to-rem( 50px );
	}
}

@include media-breakpoint-up(xxl) {
	* + .video {
		margin-top: px-to-rem( 65px );
	}
}