/* =============================================================================
- Image Hover Item
============================================================================= */
.gwel-hover-item {
	width: 100%;
	position: relative;
	.gwel-image-hover {
		width: 100%;
		position: relative;
		z-index: 1;
		overflow: hidden;
		border-style: solid;
		border-width: var(--image-border-width,0);
		border-color: var(--image-border-color);
		border-radius: var(--image-border-radius);
		transition-duration: var(--image-transition-duration);
		.gwel-image {
			position: relative;
			transition-duration: var(--image-transition-duration);
			img {
				width: 100%;
				height: auto;
			}
			&.gwel-default-ratio {
				img {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					object-fit: cover;
				}
			}
			&.gwel-image-square {
				padding-bottom: 100%;
			}
			&.gwel-image-lanscape {
				padding-bottom: 75%;
			}
			&.gwel-image-portait {
				padding-bottom: 133.333333%;
			}
			// Animations
			&.gwel-animation-zoom-out {
				transform: scale(1.1);
			}
			&.gwel-animation-move-left {
				transform: scale(1.1) translateX(3%);
			}
			&.gwel-animation-move-right {
				transform: scale(1.1) translateX(-3%);
			}
			&.gwel-animation-move-top {
				transform: scale(1.1) translateY(3%);
			}
			&.gwel-animation-move-bottom {
				transform: scale(1.1) translateY(-3%);
			}
		}
	}
	.gwel-content {
		padding-top: 30px;
		position: relative;
		display: flex;
		flex-direction: column;
		z-index: 2;
	}
	.gwel-meta-data {
		display: flex;
		gap: 12px;
	}
	.gwel-read-more {
		font-weight: bold;
	}
	.gwel-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
		pointer-events: none;
		&:before,
		&:after {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			content: '';
			transition-duration: var(--overlay-transition-duration);
		}
	}

	&.gwel-style-2 {
		.gwel-content {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			width: auto;
			padding: 30px;
		}
		.gwel-title,
		.gwel-description,
		.gwel-read-more,
		.gwel-meta-data {
			color: #ffffff;
		}
		.gwel-overlay:before {
			background-color: rgba(0,0,0,0.5);
		}
	}
	&:hover {
		.gwel-image {
			&.gwel-animation-zoom-in {
				transform: scale(1.1);
			}
			&.gwel-animation-zoom-out {
				transform: scale(1);
			}
			&.gwel-animation-move-left,
			&.gwel-animation-move-right,
			&.gwel-animation-move-top,
			&.gwel-animation-move-bottom {
				transform: scale(1.1) translateX(0);
			}
		}
		.gwel-overlay:before {
			opacity: 0!important;
		}
	}

	&:not(:hover) {
		.gwel-overlay:after {
			opacity: 0!important;
		}
	}
	.gwel-item-url {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 4;
	}
}