/* ==========================================================================
   Interactive Link Showcase List styles
   ========================================================================== */

.qodef-interactive-link-showcase {

	&.qodef-layout--double-image-list {
		padding: 185px 0 200px 0;
		display: flex;
		height: auto;

		.qodef-m-image {
			opacity: 0;
			transform: none;
			clip-path: inset(0 100% 0 0);
			transition: clip-path 0s cubic-bezier(0.37, 0, 0.63, 1) .8s, opacity .3s ease-out;

			&.qodef--active {
				z-index: 5;
				opacity: 1;
				transform: none;
				clip-path: inset(0 0 0 0);
				transition: clip-path .8s cubic-bezier(0.37, 0, 0.63, 1), opacity 0s ease-out;
			}

			img {
				opacity: 1;
				display: block;
				width: auto;
				max-width: 100%;
			}
		}

		.qodef-m-images-left {
			position: relative;
			width: 28.21%;
			margin-right: 35px;

			.qodef-m-image {
				top: -148px;
				left: 0;
			}
		}

		.qodef-m-items {
			@include qodefRelativeLayout();
			max-width: 43.58%;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			text-align: center;
			padding-left: 40px;

			.qodef-m-item {
				font-size: 60px;
				color: var(--qode-main-color);
				padding: 0;
				margin: 0 0 32px;

				&:last-child {
					margin: 0;
				}

				&:before {
					top: 35px;
					left: -70px;
					text-align: left;
				}

				&.qodef--active {
					color: #fff !important;

					&:before {
						color: currentColor;
					}
				}
			}
		}

		.qodef-m-images-right {
			position: relative;
			width: 28.21%;
			margin-left: 35px;

			.qodef-m-image {
				top: 105px;
				right: 0;
			}
		}
	}
}