@import "../../../assets/styles/scss/utilities/functions";
@import "../../../assets/styles/scss/utilities/variables";
@import "../../../assets/styles/scss/utilities/mixins";
@import "../../../assets/styles/scss/utilities/default-variables"; // check

$section: ".text-block-heading-subheading-2-columns";
#{ $section } {
	opacity: 1;
	position: relative;

	&__container {
		& > .block-editor-inner-blocks > .block-editor-block-list__layout {
			gap: 32px;
			display: flex;
			flex-direction: column;

			@include media-breakpoint-up(lg) {
				flex-direction: row;
			}
		}
	}

	&.align {
		&-flex-start {
			#{ $section }__container {
				&
					> .block-editor-inner-blocks
					> .block-editor-block-list__layout {
					align-items: flex-start;
				}
			}
		}
		&-center {
			#{ $section }__container {
				&
					> .block-editor-inner-blocks
					> .block-editor-block-list__layout {
					align-items: center;
				}
			}
		}
		&-flex-end {
			#{ $section }__container {
				&
					> .block-editor-inner-blocks
					> .block-editor-block-list__layout {
					align-items: flex-end;
				}
			}
		}
	}

	&__heading {
		@include media-breakpoint-up(sm) {
			width: 384px;
		}
	}

	&__info {
		flex: 1;
	}
}