.ld-media-icon,
.ld-media-item-overlay {
	transition-duration:  0.45s;
	transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1);
}

.ld-media-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	transform: scale(1.25);
	opacity: 0;
	transition-property: transform, opacity;

	.icon-sm & {
		font-size: 28px;
	}
	.icon-lg & {
		font-size: 44px;
	}

	&.icon-play {
		width: 55px;
		height: 55px;
		font-size: 15px;
		border-radius: 50em;
		transition-property: transform, opacity, border;

		&.bordered {
			border: 2px solid #fff;
		}
		&.solid {
			background-color: var(--color-primary);
		}

		&.size-sm {
			width: 45px;
			height: 45px;
		}
		&.size-lg {
			width: 65px;
			height: 65px;
		}
	}
}

.ld-media-bg {
	background-color: rgba(#000, 0.4);
}

.ld-media-bg,
.ld-media-item-overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.ld-media-item-overlay {
	padding: 30px;
	opacity: 0;
	visibility: hidden;
	color: #fff;
	transition-property: opacity, visibility;
}

.ld-media-content {
	position: relative;
	z-index: 2;
}

.ld-media-item {
	overflow: hidden;
	position: relative;
	color: #000;

	h3,
	h6 {
		margin: 0;
		color: inherit;
		opacity: 0;
		transform: translateY(10px);
		transition-property: transform, opacity;
		transition-duration: 0.45s;
		transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1);
	}
	h3 {
		margin-bottom: 0.25em;
	}
	h6 {
		font-size: 12px;
	}
	figure {
		background-size: cover;
		position: relative;
	}
	img,
	figure {
		transition: transform 0.85s cubic-bezier(0.215, 0.610, 0.355, 1);
	}
	img {
		width: 100%;
		visibility: hidden;
	}

	&.shadow-onhover {
		transition: box-shadow 0.3s;
		box-shadow: 0 0 0 rgba(#000, 0);
	}
	&.contents-visible {

		h3,
		h6,
		.ld-media-bg,
		.ld-media-icon,
		.ld-media-item-overlay {
			opacity: 1;
			visibility: visible;
			transform: none;
		}
	}
	&.content-bottom {
		
		h3,
		h6 {
			opacity: 1;
			visibility: visible;
			transform: none;
		}
		img {
			visibility: visible;
		}
		figure {
			overflow: hidden;
			background: none !important;
		}

		&.shadow-onhover {

			> .ld-media-content {
				padding-left: 18px;
				padding-right: 18px;
			}
		}
	}

	&:hover {

		h3,
		h6 {
			transform: translateY(0);
		}
		h3 {
			opacity: 1;
			transition-delay: 0.1s;
		}
		h6 {
			opacity: 0.4;
			transition-delay: 0.2s;
		}
		figure {
			transform: scale(1.075);
		}
		.ld-media-item-overlay {
			opacity: 1;
			visibility: visible;
		}
		.ld-media-icon {
			transform: scale(1);
			opacity: 1;
			transition-delay: 0.1s;
		}
		.liquid-overlay-link {
			z-index: 3;
		}

		&.shadow-onhover {
			box-shadow: 0 50px 75px rgba(#000, 0.25);
		}
		&.contents-visible {

			.icon-play {
				transform: scale(1.1);
				border-width: 1px;
			}
		}
		&.content-bottom {

			figure {
				transform: none;

				img {
					transform: scale(1.075);
				}
			}
		}
	}
}

.liquid-media-element-custom-height {

	.ld-media-item,
	figure {
		height: 100%;
	}
}

.ld-media-row {
	flex-flow: row wrap;

	> div {
		margin-bottom: 30px;
	}
}