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

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

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

		@include hover() {
			@include imageZoomEndEffect;
		}
	}

	&-box {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: $sp-2 $sp-4 $sp-2;
		background-color: color-mix(in srgb, var(--co-alpha) 70%, transparent);
	}

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

.img-action {
	position: relative;

	&-btn {
		position: absolute;
		z-index: 10;
		bottom: $sp-4;
		left: $sp-4;

		&:hover ~ .img-link-zoom .img-link-media {
			@include imageZoomEndEffect;
		}
	}
}

.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-ratio {
	aspect-ratio: 16 / 9;
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}