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

	/* the size options to choose on the settings page. */
	.wpnordic-modal-content.size-small {
		width: 40%;
		height: 40vh;
	}
	.wpnordic-modal-content.size-medium {
		width: 68%;
		height: 58vh;
	}
	.wpnordic-modal-content.size-large {
		width: 95%;
		height: 70vh;
	}
}

@media screen and (max-width: 1449px) {
	/* the modal  */
	.wpnordic-modal-content {
		max-width: 98%;
	}

	/* the size options to choose on the settings page. */
	.wpnordic-modal-content.size-small {
		width: 45%; 
		height: 35vh; 
	}
	.wpnordic-modal-content.size-medium {
		width: 86%; 
		height: 58vh; 
	}
	.wpnordic-modal-content.size-large {
		width: 95%;
		height: 70vh;
	}
}

/* Max-width: 1280px */
@media screen and (max-width: 1279px) {
	
	/* the modal  */
	.wpnordic-modal-content {
		max-width: 100%;
	}

	/* the size options to choose on the settings page. */
	.wpnordic-modal-content.size-small {
		width: 50%;
		height: 35vh;
	}
	.wpnordic-modal-content.size-medium {
		width: 80%;
		height: 55vh;
	}
	.wpnordic-modal-content.size-large {
		width: 98%;
		height: 75vh;
	}

	/* inner padding (option to select on backend) */
	.wpnordic-modal-content .wpnordic-modal-content-inner .first-content:not(.has-img).wpnordic-inner-padding,
	.wpnordic-modal-content .wpnordic-modal-content-inner .second-content:not(.has-img).wpnordic-inner-padding,
	.wpnordic-modal-content .wpnordic-modal-content-inner.wpnordic-col1:not(.has-img).wpnordic-inner-padding,
	.wpnordic-modal-content .wpnordic-modal-content-inner .first-content.has-img.wpnordic-inner-padding .inner-content,
	.wpnordic-modal-content .wpnordic-modal-content-inner .second-content.has-img.wpnordic-inner-padding .inner-content,
	.wpnordic-modal-content .wpnordic-modal-content-inner.wpnordic-col1.has-img.wpnordic-inner-padding .inner-content,
	.wpnordic-modal-content .wpnordic-modal-content-inner .first-content.wpnordic-inner-padding-images,
	.wpnordic-modal-content .wpnordic-modal-content-inner .second-content.wpnordic-inner-padding-images,
	.wpnordic-modal-content .wpnordic-modal-content-inner.wpnordic-col1.wpnordic-inner-padding-images {
		padding: 40px;
	}
}

@media screen and (max-width: 1024px) {
	/* the modal */
	.wpnordic-modal-content {
		max-width: 100%;
	}

	/* the size options to choose on the settings page. */
	.wpnordic-modal-content.size-small {
		width: 65%;
		height: 38vh;
	}
	.wpnordic-modal-content.size-medium {
		width: 88%;
		height: 70vh;
	}
	.wpnordic-modal-content.size-large {
		width: 98%;
		height: 85vh;
	}

	/* inner padding (option to select on backend) */
	.wpnordic-modal-content .wpnordic-modal-content-inner .first-content:not(.has-img).wpnordic-inner-padding,
	.wpnordic-modal-content .wpnordic-modal-content-inner .second-content:not(.has-img).wpnordic-inner-padding,
	.wpnordic-modal-content .wpnordic-modal-content-inner.wpnordic-col1:not(.has-img).wpnordic-inner-padding,
	.wpnordic-modal-content .wpnordic-modal-content-inner .first-content.has-img.wpnordic-inner-padding .inner-content,
	.wpnordic-modal-content .wpnordic-modal-content-inner .second-content.has-img.wpnordic-inner-padding .inner-content,
	.wpnordic-modal-content .wpnordic-modal-content-inner.wpnordic-col1.has-img.wpnordic-inner-padding .inner-content,
	.wpnordic-modal-content .wpnordic-modal-content-inner .first-content.wpnordic-inner-padding-images,
	.wpnordic-modal-content .wpnordic-modal-content-inner .second-content.wpnordic-inner-padding-images,
	.wpnordic-modal-content .wpnordic-modal-content-inner.wpnordic-col1.wpnordic-inner-padding-images {
		padding-inline: 25px;
		padding-block: 45px;
	}
}

@media screen and (max-width: 768px) {
	/* making sure the modal can take up the whole screen */
	.wpnordic-modal-content {
		max-height: 100vh;
	}

	/* no matter the selected size on this screen sizes they should be the same */
	.wpnordic-modal-content.size-small,
	.wpnordic-modal-content.size-medium,
	.wpnordic-modal-content.size-large,
	.wpnordic-modal-content.size-small_portrait {
		width: 90%;
		height: 90vh;
		min-width: unset;
	}

	/* the inner-content that has the first & second content elements as children */
	#wpnordicModal .wpnordic-modal-content-inner {
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
	}

	/* the content containers, without images */
	.wpnordic-modal-content .first-content,
	.wpnordic-modal-content .second-content {
		order: 2;
	}

	/* content containers, with images. The has-img is handled in javascript */
	.wpnordic-modal-content .first-content.has-img,
	.wpnordic-modal-content .second-content.has-img {
		order: 1;
	}

	/* override the wpnordic-inner-padding (added in public-content.php (the inner padding setting on the settings paged)) */
	.wpnordic-modal-content .first-content.has-img.wpnordic-inner-padding,
	.wpnordic-modal-content .first-content.has-img.wpnordic-inner-padding .inner-content,
	.wpnordic-modal-content .second-content.has-img.wpnordic-inner-padding,
	.wpnordic-modal-content .second-content.has-img.wpnordic-inner-padding .inner-content {
		padding-bottom: 0;
	}

	/* Mobile split 50/50 (well almost) */
	.wpnordic-modal-content.split-50-50 .first-content,
	.wpnordic-modal-content.split-50-50 .second-content {
		max-height: 60%;
		flex-grow: 1;
		order: 2;
	}
	.wpnordic-modal-content.split-50-50 .first-content.has-img,
	.wpnordic-modal-content.split-50-50 .second-content.has-img {
		flex-grow: 1;
		max-height: 40%;
		order: 1;
	}

	/* Mobile split (20 (img) / 80 (other content)) */
	.wpnordic-modal-content.split-20-80 .first-content,
	.wpnordic-modal-content.split-20-80 .second-content {
		max-height: 80%;
		order: 2;
		flex-grow: 1;
	}

	.wpnordic-modal-content.split-20-80 .first-content.has-img,
	.wpnordic-modal-content.split-20-80 .second-content.has-img {
		height: 100%;
		max-height: 200px;
		order: 1;
	}

	/* mobile split - no image  */
	.wpnordic-modal-content.split-0-100 .first-content,
	.wpnordic-modal-content.split-0-100 .second-content {
		max-height: 100%;
	}

	.wpnordic-modal-content.split-0-100 .first-content.has-img,
	.wpnordic-modal-content.split-0-100 .second-content.has-img {
		display: none;
	}

	/* make sure the outer container has border radius. The border-radius class is added in public-content.php */
	.wpnordic-modal-content.border-radius .wpnordic-modal-content-inner {
		border-radius: 15px;
	}

	/* make to not use the standard set for larger screens where columns are beside each other */
	.wpnordic-modal-content.border-radius .first-content img,
	.wpnordic-modal-content.border-radius .second-content img {
		border-radius: unset;
	}
}
/* 768 end */