/**
 * Container styles
 * Loads on front end and back end
 */

.lsx-block-container {
	margin: 0 0 1.2em 0;
	position: relative;
	padding: 0;
	&.alignfull {
		.lsx-container-content {
			@media only screen and (max-width: 900px) {
				padding: 1em 3em;
			}
		}
	}
	.wp-block-media-text {
		.wp-block-media-text__content {
			padding: 0 6% 0 6%;
		}
	}
	&.alignfull {
		.editor-block-list__block,
		.block-editor-block-list__block {
			max-width: 100%;
		}
	}

	&.alignfull .lsx-container-inside,
	&.alignfull .lsx-container-inside {
		@media only screen and (min-width: 768px) {
			max-width: 100%;
			margin: 0 auto;
		}
	}

	&.alignwide .lsx-container-inside,
	&.alignwide .lsx-container-inside {
		@media only screen and (min-width: 768px) {
			max-width: 80%;
			margin: 0 auto;
		}
	}

	.lsx-container-image-wrap {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		height: 100%;
		z-index: 0;
		background-size: 0;
		&.has-background-mobile {
			@media (max-width: 767px) {
				background-size: auto;
				img {
					display: none;
				}
			}
			@media (min-width: 768px) {
				background-size: 0 !important;
			}
		}
	}

	.lsx-container-image {
		object-fit: cover;
		height: 100%;
		width: 100%;
		transition: 0.3s ease;
	}

	.lsx-container-content {
		margin: 0 auto;
		position: relative;
		@media only screen and (max-width: 900px) {
			.lsx-block-container {
				.lsx-container-content {
					padding: 15px;
				}
			}
		}
	}

	.lsx-container-image:not(.has-background-dim) {
		opacity: 0;
	}

	.has-background-dim {
		opacity: 0.5;
	}

	.has-background-dim-10 {
		opacity: 0.1;
	}

	.has-background-dim-20 {
		opacity: 0.2;
	}

	.has-background-dim-30 {
		opacity: 0.3;
	}

	.has-background-dim-40 {
		opacity: 0.4;
	}

	.has-background-dim-50 {
		opacity: 0.5;
	}

	.has-background-dim-60 {
		opacity: 0.6;
	}

	.has-background-dim-70 {
		opacity: 0.7;
	}

	.has-background-dim-80 {
		opacity: 0.8;
	}

	.has-background-dim-90 {
		opacity: 0.9;
	}

	.has-background-dim-100 {
		opacity: 1;
	}

	.lsx-container-left-top {
		object-position: left top;
	}

	.lsx-container-left-center {
		object-position: left center;
	}

	.lsx-container-left-bottom {
		object-position: left bottom;
	}

	.lsx-container-center-left {
		object-position: center left;
	}

	.lsx-container-center-center {
		object-position: center center;
	}

	.lsx-container-center-right {
		object-position: center right;
	}

	.lsx-container-right-top {
		object-position: right top;
	}

	.lsx-container-right-center {
		object-position: right center;
	}

	.lsx-container-right-bottom {
		object-position: right bottom;
	}

	.lsx-container-parallax {
		object-position: parallax;
	}

	.lsx-container-fit {
		object-fit: contain;
	}
}