
.standout-basic {
	&.side-spacing {
		margin-inline: var(--content-margin);
	}

	&.is-full-width {
		& > .standout-max-container {
			max-width: unset;
			
			& > * > .acf-innerblocks-container {
				padding: 0 var(--content-margin);
				max-width: calc(var(--content-max-size) + var(--content-margin) * 2) !important;
				width: 100%;
				margin-left: auto;
    			margin-right: auto;

				:is(.is-half-height) & {
					height: 50vh;
					min-height: 300px;
				}

				:is(.is-full-height) & {
					height: 100vh;
					min-height: 500px;
				}
			}
		}
	}

	&.has-bg > * > .standout-block-inner {
		display: grid;
		grid-template-columns: 100%;
	}

	&.has-bg > * > * > .standout-block-background-deco,
	&.has-bg > * > * > .acf-innerblocks-container {
		grid-column: 1 / -1;
		grid-row: 1 / -1;
	}

	&.has-bg-img > * > * > .acf-innerblocks-container,
	&.has-bg-video > * > * > .acf-innerblocks-container,
	&.has-bg-iframe > * > * > .acf-innerblocks-container {
		padding: var(--gap-m) var(--content-margin);
		z-index: 1;
	}

	& > * > * > .standout-block-background-deco {
		display: flex;
		align-items: var(--bg-align-vertical);
		justify-content: var(--bg-align-horizontal);
		height: 0;
		min-height: 100%;
		line-height: 0;
		overflow: hidden;

		& > .standout-block-background-deco-element {
			width: auto;
			max-width: none;
			min-width: 100%;
			height: auto;
			max-height: none;
			min-height: 100%;
			object-fit: cover;
			pointer-events: none;
		}
	}

	&.has-bg-iframe {
		& > * > * > .standout-block-background-deco > .standout-block-background-deco-element {
			position: relative;
			height: 100%;
			overflow: hidden;

			& iframe {
				position: absolute;
				top: 50%;
				left: 50%;
				width: auto;
				min-width: calc(100% + 4px);
				max-width: none;
				height: auto;
				min-height: 100%;
				max-height: none;
				aspect-ratio: 16 / 9;
				transform: translateX(-50%) translateY(-50%);
			}
		}

		&[data-bg-min-height="img"] > * > * > .standout-block-background-deco > .standout-block-background-deco-element {
			height: 100vh;
		}
	}

	&[data-bg-min-height="img"] {
		& > * > * > .standout-block-background-deco {
			height: auto;
			min-height: auto;

			& > .standout-block-background-deco-element {
				max-height: calc(100vh - var(--header-actual-height, 0px) - var(--wp-admin--admin-bar--height, 0px));
			}
		}

		& > * > * > .acf-innerblocks-container {
			align-self: center;

			& > p {	
				margin-inline: 0;
			}
		}
	}

	&.video-hero {
		&.has-bg-video > * > * > .acf-innerblocks-container {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-self: flex-end;
			padding-block: var(--gap-l);
		}

		& > * > * > .standout-block-background-deco {
			width: 100vw;
			margin-left: 50%;
			translate: -50%;
			background-color: #000;

			& .standout-block-background-deco-element {
				opacity: .7;
			}
		}
	}

	&.demo-front-hero .standout-block-background-deco {
		background-color: #000;
	}

	&.demo-front-hero .standout-block-background-deco img {
		opacity: .7;
	}
}
