/* Sign-Up Form Block */

.signup-block {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--1);
	padding: var(--2_5) var(--2);
}

.signup-block__heading {
	grid-column: 3 / span 8;
	margin-bottom: var(--0_75);
}

.signup-block__form {
	grid-column: 3 / span 8;
}

.signup-form__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--1);
}

.signup-form__field input {
	width: 100%;
	border: none;
	border-bottom: 1px solid var(--black);
	background: transparent;
	padding: 0;
	font-family: "DTLElzevirTCaps-Book";
	font-size: var(--font-size-md);
	line-height: var(--0_75);
	letter-spacing: var(--caps-letter-spacing-md);
	text-transform: lowercase;
	color: var(--black);
	outline: none;
	border-radius: 0;
	-webkit-appearance: none;
}

.signup-form__field input::placeholder {
	color: var(--black--50);
}

.signup-form__error {
	display: block;
	visibility: hidden;
	color: var(--orange);
	font-family: "DTLElzevirT-Book";
	font-size: var(--font-size-sm);
	line-height: var(--line-height-sm);
	letter-spacing: var(--letter-spacing-sm);
	margin-top: var(--0_25);
}

.signup-form__field.has-error .signup-form__error {
	visibility: visible;
}

.signup-form__submit {
	display: flex;
	justify-content: center;
	margin-top: var(--0_75);
}

.signup-form__submit input {
	display: inline-block;
	border: 1px var(--black) solid;
	padding: .15rem var(--0_25);
	height: var(--0_75);
	background: transparent;
	font-family: "DTLElzevirTCaps-Book";
	font-size: var(--font-size-sm);
	line-height: var(--line-height-sm);
	letter-spacing: var(--caps-letter-spacing-sm);
	text-transform: lowercase;
	color: var(--black);
	cursor: pointer;
	width: calc(50% - var(--0_5));
}

.signup-form__submit input:hover {
	color: var(--white);
	background-color: var(--black);
}

@media screen and (max-width: 768px) {
	.signup-block {
		column-gap: var(--0_5);
		padding: var(--2) var(--0_5) var(--2_5);
	}

	.signup-block__heading,
	.signup-block__form {
		grid-column: 1 / span 12;
	}

	.signup-form__fields {
		grid-template-columns: 1fr;
		gap: var(--0_5);
	}

	.signup-form__field input {
		font-size: var(--font-size-sm);
		line-height: var(--line-height-sm);
		letter-spacing: var(--caps-letter-spacing-sm);
	}

	.signup-form__submit {
		margin-top: var(--0_75);
	}

	.signup-form__submit input {
		width: 100%;
	}

	.signup-form__error {
		margin-top: var(--0_25);
	}
}