.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-link-services {
	--offset: #{$sp-5};
	color: $co-base-1;
	border-radius: $border-radius-4;

	&:after {
		content: '';
		position: absolute;
		z-index: 1;
		inset: 0;
		border-radius: $border-radius-4;
		background: linear-gradient(to top, rgba($co-alpha, .8), transparent);
	}

	.is-icon {
		position: absolute;
		z-index: 2;
		top: var(--offset);
		right: var(--offset);
		img {
			border-radius: 50%;
		}
	}

	.is-caption {
		position: absolute;
		z-index: 3;
		inset: auto var(--offset) var(--offset);
	}

	@include hover() {
		color: $co-base-1;
	}
}

/* .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;
	}
} */

@include mediaQ(xl) {
	.img-link-services {
		--offset: #{$sp-6};
	}
}