/*
******** ------------------------------ **** CONTACT ****
*/
.contact {
	--grid-gap: 0;
	--grid-columns-md: 1;
	--grid-columns-lg: 2;
	
	margin-inline: auto;
	grid-column: full-width;
	inline-size: 100%;
	text-align: center;
	color: white;
	min-block-size: 800px;
}

.contact__phone {
	background-color: var(--clr-cta);
	display: grid;
	align-items: center;
	padding-block: var(--gap-md);

	@media screen and (min-width: 1025px) {
		display: grid;
	}
}

.contact__icon {
	margin-inline: auto;
}

.contact__phone-content {
	grid-column: 1/1;
	padding: var(--gap-md);
	padding-block-start: var(--gap);

	@media screen and (min-width: 1025px) {
		grid-column: 2/3;
	}
}

.contact__phone-number {
	color: white;
	font-size: clamp(1.75rem, -1rem + 4.2vw, 2.3rem);;
	font-weight: 200;
	display: block;
}

.contact__form {
	--form-gap: 3rem;

	display: grid;
	align-items: center;
	background-color: var(--clr-accent-1);

	@media screen and (min-width: 1025px) {
		display: grid;
		grid-template-columns: min(50vw, 1100px) 1fr;
		inline-size: 50vw;
	}
}

.contact__form-content {
	grid-column: 1/2;
	padding-inline: var(--gap);
	padding-block: var(--gap-lg);

	@media screen and (min-width: 769px) {
		padding: var(--gap-lg);
	}
}

.contact__title {
	margin-inline: auto;
}

.contact__title--form {
	margin-block-end: var(--gap-md);
}

.contact__button {
	border: 3px solid white;
	margin-block-start: var(--gap);

	&:hover {
		cursor: pointer;
	}
}