@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 {
		row-gap: 32px;
		column-gap: 65px;
		display: flex;
		flex-direction: column;

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

	&.align {
		&-flex-start {
			#{ $section }__container {
				align-items: flex-start;
			}
		}
		&-center {
			#{ $section }__container {
				align-items: center;
			}
		}
		&-flex-end {
			#{ $section }__container {
				align-items: flex-end;
			}
		}
	}

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

	&__info {
		flex: 1;
		position: relative;

		&::before {
			content: "";
			background-color: $ui-border-line-divider-on-light;
			position: absolute;
			top: -16px;
			width: 100%;
			height: 1px;

			@include media-breakpoint-up(lg) {
				height: 100%;
				width: 1px;
				top: 0;
				left: -33px;
			}
		}
	}
}