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

.gb-block-container {
	margin: 0;
	position: relative;
	padding: 0;

	&.alignfull {

		.block-editor-block-list__block {
			max-width: 100%;
		}
	}

	&.alignfull .gb-container-inside,
	&.alignfull .gb-container-inside {

		@media only screen and (min-width: 768px) {
			max-width: 100%;
			margin: 0 auto;
		}
	}

	&.alignwide .gb-container-inside,
	&.alignwide .gb-container-inside {

		@media only screen and (min-width: 768px) {
			max-width: 80%;
			margin: 0 auto;
		}
	}

	.gb-container-image-wrap {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		height: 100%;
		z-index: 0;
	}

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

	.gb-container-content {
		margin: 0 auto;
		position: relative;
	}

	.gb-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;
	}
}