Content Form Over Image

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

.block-form-over-image {
	position: relative;

	.container {
		position: relative;
		z-index: 5;
		@include padding-top( rem-calc(100) );
		@include padding-bottom( rem-calc(100) );

		.block-form-over-image {
			&__heading {
				@include margin-bottom( rem-calc(32) );

				@include bp($lg) {
					margin-bottom: 0;
				}

				* {
					line-height: 1;
					margin-bottom: 0;
					font-family: $font-family-primary;
					margin: 0;
					text-transform: uppercase;
					font-weight: 800;
					@include fluid-type(28, 56);
				}
			}

			&__content {
				@include margin-top( rem-calc(36) );
				@include margin-bottom( rem-calc(24) );

				@include bp($lg) {
					margin-bottom: 0;
				}

				p {
					color: var(--text-color);
					margin-bottom: 0;
					text-wrap: balance;
				}
			}
		}
	}

	&__image {
		display: flex;
		flex-direction: column;
		pointer-events: none;
		z-index: 2;

		&:before {
			width: 100%;
			height: 100%;
			content: '';
			background: linear-gradient( 90deg, $primary, rgba($primary, 0) );
			position: absolute;
			inset: 0;
			z-index: 2;
		}

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.gform_wrapper {
		input[type=submit] {
			width: 100%;
			background-color: $secondary;
			border: 2px solid $secondary;
			color: $white;
			line-height: normal !important;

			@include bp($md) {
				width: auto;
			}

			&:hover,
			&:focus {
				background-color: $dark-red;
				border: 2px solid $dark-red;
			}
		}

		.gfield_description {
			color: var(--text-color);
			margin-bottom: 0;
			font-style: italic;
		}

		label {
			color: var(--text-color);
			margin-bottom: 0;

			a {
				color: $dark-red;
			}
		}

		.ginput_container_consent {
			display: flex;
			flex-direction: row;
			align-items: center;

			label {
				&:after {
					content: ' *';
					color: $dark-red;
				}
			}

			.gfield_required {
				display: none;
			}
		}

		.gform_validation_errors {
			width: calc(100% - var(--bs-gutter-x)) !important;
			margin-right: calc(var(--bs-gutter-x) * .5);
			margin-left: calc(var(--bs-gutter-x) * .5);

			@include bp($md) {
				width: calc(100% - 32px) !important;
			}
		}
	}

	.gform_wrapper.gravity-theme.gravity-theme form .gfield,
	.gform_wrapper.gravity-theme.gravity-theme form .gform_footer {
		@include bp($md, true) {
			padding-right: 0;
			padding-left: 0;
		}
	}

	.gfield--type-consent {
		width: 100%;
	}
}