.tm-image-box {
	position: relative;
	max-width: 100%;
	text-align: center;
	@extend %NormalTransition;

	&__wrapper {
		position: relative;
		z-index: 1;
	}

	&__wrap {
		max-width: 100%; // Fix lazy loading overlap layout.
	}

	.tm-image-box__image {
		position: relative;
		font-size: 0;
		line-height: 1;
		max-width: 100%;
	}

	.minimog-image {
		@extend %NormalTransition;
		border-radius: $box-large-rounded;
		display: inline-flex;
		max-width: 100%; // Fix lazy loading overlap layout.

		img {
			border-radius: inherit;
		}
	}

	&__title {
		@extend %NormalTransition;
		font-size: 20px;
		font-weight: $heading-font-weight-secondary;
		line-height: 1.5;
		margin-bottom: 0;
		max-width: 100%;
	}

	&__sub-title-wrapper {
		margin: 0 0 var(--sub-title-spacing, 15px);
	}

	&__sub-title {
		margin: 0;
	}

	&__sub-title-text {
		display: inline-block;
		border: 2px solid #eee;
		border-radius: 18px;
		font-size: 16px;
		line-height: 26px;
		padding: 3px 18px;
	}

	&__title-icon {
		font-size: inherit;
		color: inherit;
		margin-left: 10px;
	}

	&__badge-wrap {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
	}

	&__badge {
		pointer-events: auto;
		display: block;
		margin: 10px 0 0 10px;
		padding: 2px 9px;
		font-size: 13px;
		font-weight: $body-font-weight-bold;
		line-height: 20px;
		text-transform: uppercase;
		letter-spacing: .05em;
		color: #fff;
		background: $primary-color;
		border-radius: $box-small-rounded;
	}

	&__description {
		@extend %NormalTransition;
		width: 100%;
		margin-top: 12px;
	}

	.tm-button-wrapper {
		margin: 25px 0 0;
	}

	&--image-top {
		.tm-image-box__image {
			margin-bottom: 16px;
		}
	}

	&--image-left,
	&--image-right {
		.tm-image-box__wrap {
			display: flex;
			align-items: flex-start;
		}

		.tm-image-box__image {
			flex-shrink: 0;
			max-width: 50%;
		}

		.tm-image-box__content {
			flex-grow: 1;
		}
	}

	&--image-left {
		text-align: left;

		.tm-image-box__image {
			margin-right: 20px;
		}
	}

	&--image-right {
		text-align: right;

		.tm-image-box__wrap {
			flex-direction: row-reverse;
		}

		.tm-image-box__image {
			margin-left: 20px;
		}
	}

	&--image-bottom {
		.tm-image-box__wrap {
			display: flex;
			flex-direction: column-reverse;
		}

		.tm-image-box__image {
			margin-top: 16px;
		}
	}

	&--content-alignment-middle {
		.tm-image-box__wrap {
			align-items: center;
		}
	}

	&--content-alignment-bottom {
		.tm-image-box__wrap {
			align-items: flex-end;
		}
	}
}

.tm-image-box--style-2 {
	text-align: left;

	.tm-image-box__title {
		font-size: 24px;
		line-height: 1.46;
	}

	.tm-image-box__description {
		margin-top: 9px;
	}

	.tm-button-wrapper {
		margin-top: 13px;
	}

	&.tm-image-box--image-top {
		.tm-image-box__image {
			margin-bottom: 26px;
		}
	}
}

.elementor-widget-tm-image-box-carousel {
	.highlight-centered-items-scale {
		.swiper-slide {
			display: flex !important;
			align-self: stretch !important;
			justify-content: unset;
			align-items: center;
			height: auto;

			.tm-image-box {
				height: var(--placeholder-height, auto);
				display: flex;
				align-items: center;
			}

			.tm-image-box__image {
				position: relative;
				display: block !important;

				&:after {
					content: '';
					display: block;
					padding-top: 100%;
					transition: all .4s;
				}

				.minimog-lazy-image,
				img {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}

		.swiper-container-initialized {
			.swiper-slide {
				&:not(.swiper-slide-active) {
					.tm-image-box__image {
						&:after {
							padding-top: 70%;
						}
					}
				}
			}
		}
	}

	.tm-image-box__description-text {
		display: inline-block;
		width: 100%;
		max-width: 100%;
	}
}

@include elementor-breakpoint-down(tablet) {
	.tm-image-box--image-left,
	.tm-image-box--image-right {
		&.tm-image-box--image-top-mobile {
			.tm-image-box__wrap {
				display: block;
			}

			.tm-image-box__image {
				max-width: 100%;
				margin-right: 0;
				margin-left: 0;
				margin-bottom: 20px;
			}
		}
	}
}
