.img-link {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
	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;
	} */

	&-accommodation {
		color: $co-base-1;

		&:after {
			content:"";
			position: absolute;
			inset: 0;
			background-color: rgba($co-base-0, .4);
			pointer-events: none;
		}

		.is-price {
			position: absolute;
			z-index: 1;
			top: $sp-4;
			left: $sp-4;
			padding: $sp-2 $sp-4;
			background-color: rgba($co-alpha, .7);
		}

		.is-caption {
			position: absolute;
			z-index: 1;
			inset: 0;
			padding: $sp-7 $sp-4;
			align-content: center;
			text-align: center;
		}

		.is-info {
			gap: $sp-5;
			.ico {
				margin-right: .3em;
			}
		}

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

	&-icon {
		.is-icon {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 60px;
			height: 60px;
			margin-left: -30px;
			margin-top: -30px;
			align-content: center;
			color: $co-base-1;
			font-size: 2.4rem;
			text-align: center;
			background-color: rgba($co-alpha, .7);
			border-radius: 50%;
			transform: scale3d(0,0,1) rotate(0deg);
			transition: transform .3s ease-out;
		}
		@include hover() {
			.is-icon {
				transform: scale3d(1,1,1) rotate(360deg);
			}
		}
	}
}

/* .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(smMax) {
	.img-link-accommodation {
		.is-price {
			font-size: $font-size-small;
			padding: $sp-1 $sp-2;
		}
	}
}

@include mediaQ(sm) {

	.img-link-accommodation {
		.is-info {
			gap: $sp-3 $sp-6;
			font-size: $font-size-small;
			.ico {
				font-size: 3rem;
			}
		}
	}
}