.img-link {
	position: relative;
	display: block;
	overflow: hidden;
	img  { transform: translateZ(0);}

	&-opacity {
		.img-link-media	img {
			opacity: 1;
			transition: opacity .3s linear;
		}
		@include hover() {
			.img-link-media	img {
				opacity: .7;
			}
		}
	}

	&-zoom {
		.img-link-media {
			overflow: hidden;
			img {
				transform: scale3d(1,1,1);
				transition: transform .3s ease-out;
			}
		}

		@include hover() {
			.img-link-media img {
				@include imageZoomEndEffect;
			}
		}
	}

	&-box {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: $sp-2 $sp-4 $sp-2;
		background-color: rgba($co-alpha, .7);
	}

	&-bit {
		position: absolute;
		bottom: $sp-2;
		left: $sp-2;
	}
}

.img-cta {
	position: relative;

	&-box {
		position: absolute;
		top: 50%;
		left: 50%;
		width: fit-content;
		max-width: 90%;
		padding: $sp-3 $sp-6 $sp-4;
		transform: translate3d(-50%, -50%, 0);
		background-color: rgba($co-base-1, .3);
		box-shadow: $shadow-md;
		// backdrop-filter: blur(5px);
	}

	img { object-fit: cover;}
}

.img-left {
	float: left;
	margin-right: $sp-4;
	margin-bottom: $sp-3;
}

.img-right {
	float: right;
	margin-left: $sp-4;
	margin-bottom: $sp-3;
}

.img-center-block {
	margin-left: auto;
	margin-right: auto;
}

.img-play {
	position: relative;
	text-align: center;

	&-media { display: none;}

	&-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		inset: 0;
		z-index: 10;
		width: 100%;

		.ico { font-size: 6rem;}
	}

	iframe { width: 100%;}

	&-16x9 iframe { aspect-ratio: 16 / 9;}
	&-4x3 iframe { aspect-ratio: 4 / 3;}

	&.is-playing {
		.img-play-media { display: block;}
		img,
		.img-play-btn { display: none;}
	}
}

.img-ratio {
	aspect-ratio: 16 / 9;
	// &-1x1 { aspect-ratio: 1 / 1;}
	// &-4x3 { aspect-ratio: 4 / 3;}
	// &-21x9 { aspect-ratio: 21 / 9;}
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}