.form {
	--form-item-gap: 0.5em;
	font: 1em Ainslie-Nor, sans-serif;
}

.form-section {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 6rem var(--pad);
}

.form-section .heading {
	margin-bottom: 1em;
}

.form-section .heading-1 {
	font-size: 2rem;
}

.form-grid,
.form-col {
	display: flex;
	flex-direction: column;
	gap: var(--form-item-gap);
}

.form-grid:not(:last-of-type) {
	margin-bottom: var(--form-item-gap);
}

input[type="text"],
input[type="date"],
input[type="email"],
input[type="tel"],
select {
	appearance: none;
}

/* Reset input appareance in iOS */
input[type="date"] {
	/* fix iphone display */
	color: var(--color-mid-green);
	min-height: 2.2em;
	min-width: 160px;
}

.form-submit {
	align-self: self-start;
	margin-top: 1em;
}

.form-row {
	display: flex;
	gap: var(--form-item-gap);
}

.form-row > .form-item {
	flex: 1 1 0;
	max-width: calc(50% - var(--form-item-gap)/2);
	margin: 0;
}

.form-item label a {
    text-decoration: underline;
}

.form-date,
.form-email,
.form-tel,
.form-text {
	max-width: 100%;
	padding: 0.5em 1.2em;
	border: 0;
	border-radius: 1.5em;
	background-color: white;
	color: var(--color-mid-green);
}

.form-item::placeholder,
.form-email::placeholder,
.form-tel::placeholder,
.form-text::placeholder {
	color: var(--color-mid-green);
	opacity: 1;
}

.form-item .description {
	margin-top: var(--form-item-gap);
	font-size: smaller;
}

.form-type-date label {
	padding: 0.4em 0 1em;
	display: block;
	width: fit-content;
	color: currentColor;
}

.fieldgroup > .fieldset-wrapper > div {
	display: flex;
	gap: 1em;
}

.form-required::after {
	content: "*";
}

ul[data-drupal-selector="edit-errors"] {
  font: 0.875em Ainslie-Nor, sans-serif;
  color: var(--color-red);
}

.newsletter-subscription-form {
	margin: 1rem 0 2rem;
}

@media screen and (min-width: 768px) {

	.form-section .heading-1 {
		font-size: min(3.33vw, 3em);
	}

	.form-section__content {
		max-width: 1440px;
		margin: 0 auto;
		padding: 0 var(--pad);
	}

	.form-grid {
		flex-direction: row;
		gap: 5%;
	}

	.form-col {
		flex-grow: 1;
		width: 100%;
	}

	.form-col:not(:only-child) {
		max-width: calc(50% - 3%);
	}
}