/* ==========================================================================
   Interactive Link Showcase shortcode responsive styles
   ========================================================================== */

.qodef-interactive-link-showcase {
	
	&.qodef-type--standard {
		
		@include qodefScreenSize1366 {
			padding: 100px 0;
			
			.qodef-m-images {
				width: 60%;
			}
			
			.qodef-m-items {
				width: 40%;
			}
		}
		
		@include qodefScreenSize1024 {
			padding: 60px 0;
			
			.qodef-m-images {
				width: 80%;
			}
			
			.qodef-m-items {
				width: 100%;
				padding-left: 0;
				align-items: flex-start;
			}
			
			.qodef-m-item {
				@include qodefH3Style();
				padding-bottom: 3px;
			}
		}
		
		@include qodefScreenSize680 {
			padding: 30px 0;
			
			.qodef-m-items {
				padding-left: 30px;
			}
		}
	}

	&.qodef-layout--list {

		@media only screen and (max-width: 1520px) {

			.qodef-m-items {

				.qodef-m-item {
					font-size: 100px;
				}
			}
		}

		@include qodefScreenSize1366() {

			.qodef-m-items {
				width: 60%;

				.qodef-m-item {
					font-size: 80px;
				}
			}

			.qodef-m-images {
				width: 40%;
			}
		}

		@media only screen and (max-width: 1200px){

			.qodef-m-items {

				.qodef-m-item {
					font-size: 70px;
				}
			}

			.qodef-m-images {

				.qodef-m-image {
					left: 0;
				}
			}
		}

		@include qodefScreenSize1024() {

			.qodef-m-items {
				padding-left: 0;

				.qodef-m-item {
					font-size: 60px;
					display: flex;
					padding: 0;
					margin: 0 0 30px;

					&:before {
						top: 0;
						left: 0;
						margin-right: 1em;
					}
				}
			}

			.qodef-m-images {

				.qodef-m-image {
					left: 0;
				}
			}
		}

		@include qodefScreenSize768() {

			.qodef-m-items {

				.qodef-m-item {
					font-size: 40px;
				}
			}

			.qodef-m-images {

				.qodef-m-image {

					img {
						max-height: calc(100vh - 13vw);
						width: auto;
						max-width: calc(50vw - 13vw);
					}
				}
			}
		}

		@include qodefScreenSize680() {
			flex-direction: column;

			.qodef-m-items {
				display: block;
			}

			.qodef-m-images {
				display: block;

				.qodef-m-image {
					left: unset;
					right: 2%;
					top: 0;
				}
			}
		}

		@include qodefScreenSize480() {

			.qodef-m-items {

				.qodef-m-item {
					font-size: 33px;
				}
			}
		}
	}
}