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

.qodef-interactive-link-showcase {

	&.qodef-layout--list {
		padding: 0;
		display: flex;

		@include qodefScreenSize1024 {
			height: 100%;
		}

		.qodef-m-images {
			position: relative;
			width: 35%;

			.qodef-e-content-with-video {
				max-width: 426px;
				transform: rotate(-3.2deg) scale(1);

				.qodef-m-image {

					img {
						visibility: hidden;
						opacity: 0;
					}
				}

				.qodef-video-holder {
					position: absolute;
					top: 10px;
					left: -5px;
					width: 100%;
					height: 100%;
					overflow: hidden;

					.qodef-m-video {
						width: 100%;
						height: 100%;
						background-color: transparent;
						animation: qodef-element-fade-in .5s ease-out both;

						video {
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}
				}
			}

			.qodef-m-image {
				top: 65px;
				left: 30px;
				height: auto;
				width: auto;

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

		.qodef-m-items {
			@include qodefRelativeLayout();
			width: 65%;
			align-items: flex-start;
			flex-direction: column;
			padding-left: 20px;

			.qodef-m-item {
				font-size: 120px;
				color: var(--qode-main-color);

				&:before {
					top: 45px;
					left: -96px;
				}

				&.qodef--active {
					color: inherit;
					font-family: $meta-font;
					font-weight: 400;
				}
			}
		}
	}
}