@use "../base/variables" as v

.contact-cta
	padding: 5rem 0
	background: #3CC4FA

	@media (max-width: v.$bp-sm)
		padding: 4rem 0

	&__container
		display: flex
		justify-content: center

.contact-form
	width: 100%
	max-width: 108rem
	display: flex
	flex-wrap: wrap
	align-items: flex-start
	justify-content: center
	gap: 1.6rem

	&__title
		flex-basis: 100%
		text-align: center
		font-weight: 700
		font-size: 1.8rem
		color: v.$color-black
		margin-bottom: 0.8rem

	.field
		flex: 1 1 24rem
		max-width: 28.5rem

		@media (max-width: v.$bp-sm)
			flex: 1 1 100%
			max-width: none

	// Groups the submit button with its note so the note hugs the button's own
	// right edge, instead of the whole (wider, centered) form row's edge.
	&__submit-wrap
		display: flex
		flex-direction: column
		align-items: center
		gap: 0.6rem
		flex-shrink: 0

		@media (max-width: v.$bp-sm)
			width: 100%
			align-items: stretch

	&__submit
		height: 4rem
		padding: 0 3.6rem
		font-size: 1.5rem

		@media (max-width: v.$bp-sm)
			width: 100%

	&__note
		text-align: right
		font-size: 1.1rem
		color: v.$color-black
		@media (max-width: 767px)
			text-align: center