@layer blocks.newsletter-signup-form {
	[data-block="newsletter-signup-form"] {
		padding-top: 50px;
		padding-bottom: 50px;

		@media screen and (max-width: 767px) {
			padding-top: 25px;
			padding-bottom: 25px;
		}

		.box {
			font-size: var(--font-size-base);
			background-color: rgba(var(--color-red-rgb), 0.4);
			color: var(--color-dark-blue);

			@media screen and (max-width: 767px) {
				font-size: var(--font-size-lg);
				margin-left: -20px;
				margin-right: -20px;
			}

			@media (max-width: 576px) {
				font-size: var(--font-size-md);
			}

			.newsletter-image {
				width: 100%;
				height: 100%;
				object-fit: cover;

				@media screen and (max-width: 991px) {
					height: 200px;
				}
			}

			.form-content {
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding: 30px 60px 55px;

				@media screen and (max-width: 767px) {
					padding: 32px 20px;
				}

				.eyebrow {
					font-weight: var(--font-weight-extra-bold);

					@media screen and (max-width: 767px) {
						font-size: var(--font-size-sm);
						margin: 0 0 5px;
						font-weight: var(--font-weight-normal);
					}
				}

				.title {
					margin-bottom: 20px;
					font-size: var(--font-size-5xl);
					line-height: 100%;
					font-weight: var(--font-weight-extra-bold);
					font-family: var(--font-family-serif);

					@media screen and (max-width: 1399px) {
						font-size: var(--font-size-4xl);
						margin-bottom: 0;
					}

					@media screen and (max-width: 767px) {
						font-size: var(--font-size-3xl);
					}
				}

				.text {
					margin-bottom: var(--space-9);
					line-height: 140%;

					@media screen and (max-width: 767px) {
						font-size: var(--font-size-sm);
						margin-bottom: 30px;
					}
				}

				.wpcf7 {

					.wpcf7-response-output,
					.wpcf7-not-valid-tip {
						font-size: var(--font-size-sm);
					}

					.invalid [data-c-button] {
						height: 60px;
					}

					.before-send {
						display: flex;
						flex-direction: column;
						gap: 10px;

						.form-wrapper {
							display: flex;
							flex-direction: row;
							gap: 20px;

							@media screen and (max-width: 1399px) {
								gap: 0;
							}

							input[type="email"] {
								font-size: var(--font-size-base);
								border: none;
								font-weight: var(--font-weight-medium);
								color: var(--color-dark-blue);
								height: 60.6px;

								@media screen and (max-width: 1399px) {
									font-size: var(--font-size-lg);
								}
							}

							@media screen and (max-width: 1399px) {
								[data-c-button] {
									background-color: var(--color-red);
									color: var(--color-white);

									span {
										position: absolute;
										width: 1px;
										height: 1px;
										padding: 0;
										margin: -1px;
										overflow: hidden;
										clip: rect(0, 0, 0, 0);
										border: 0;
									}
								}
							}
						}

						.disclaimer {
							font-size: var(--font-size-sm);
							line-height: 150%;
							color: var(--color-dark-blue);
							padding-right: 245px;

							@media screen and (max-width: 1399px) {
								padding-right: 0;
							}

							@media screen and (max-width: 767px) {
								font-size: var(--font-size-xs);
							}

							a {
								text-decoration: underline;
								text-underline-offset: 3px;
							}
						}
					}

					.after-send {
						border: none;
						padding: 0;
						color: var(--color-dark-blue);

						strong {
							font-size: var(--font-size-xl);

							@media screen and (max-width: 767px) {
								font-size: var(--font-size-lg);
							}
						}
					}
				}
			}
		}
	}
}