main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--spacing-4xl);
	margin: 5% var(--spacing-4xl);
	align-items: start;

	.info {
		background: var(--background-white);
		border: 1px solid var(--border-color);
		border-radius: var(--radius-3xl);
		padding: var(--spacing-3xl);
		box-shadow: 0 10px 30px var(--shadow-light);

		h1 {
			font-size: var(--font-size-6xl);
			margin-bottom: var(--spacing-md);
			color: var(--text-dark);
		}

		p {
			font-size: var(--font-size-base);
			line-height: var(--line-height-normal);
			color: var(--text-light);
			margin-bottom: 16px;
		}

		.contact-details {
			display: grid;
			gap: var(--spacing-md);
			font-size: var(--font-size-sm);
			color: var(--text);

			p {
				margin: 0;
			}

			a {
				color: var(--text-dark);
				text-decoration: none;
				font-weight: var(--font-weight-semibold);

				&:hover {
					color: var(--accent-hover);
					text-decoration: underline;
				}
			}
		}

		.googlemaps {
			margin-top: var(--spacing-xl);

			iframe {
				width: 100%;
				height: 300px;
				border: none;
				border-radius: var(--radius-lg);
			}
		}
	}

	#contact-form {
		background: var(--background-white);
		border: 1px solid var(--border-color);
		border-radius: var(--radius-3xl);
		padding: var(--spacing-3xl);
		box-shadow: 0 10px 30px var(--shadow-light);

		form {
			display: grid;
			gap: var(--spacing-lg);

			label {
				font-weight: var(--font-weight-semibold);
				color: var(--text-dark);

				span {
					color: var(--accent-hover);
					margin-right: var(--spacing-xs);
					font-size: var(--font-size-4xl);
					user-select: none;
				}
			}

			input,
			textarea {
				width: 100%;
				border: 1px solid var(--border-color-input);
				border-radius: var(--radius-lg);
				padding: var(--spacing-md) var(--spacing-md);
				font-size: var(--font-size-base);
				background: var(--background-light);
				transition:
					border-color var(--transition-fast),
					box-shadow var(--transition-fast);

				&:focus {
					outline: none;
					border-color: var(--accent);
					box-shadow: 0 0 0 3px var(--shadow-accent);
					background: var(--background-white);
				}

				&:focus-visible {
					outline: 2px solid var(--accent);
					outline-offset: 2px;
				}

				textarea {
					resize: vertical;
					min-height: 140px;
				}
			}

			button {
				justify-self: start;
				background-color: var(--accent);
				color: var(--text-dark);
				border: none;
				padding: var(--spacing-md) var(--spacing-lg);
				border-radius: var(--radius-lg);
				font-weight: var(--font-weight-bold);
				cursor: pointer;
				transition:
					transform var(--transition-fast),
					box-shadow var(--transition-fast);

				&:hover {
					transform: translateY(-1px);
					box-shadow: 0 8px 16px var(--shadow-accent-hover);
				}

				&:focus-visible {
					outline: 2px solid var(--accent);
					outline-offset: 2px;
				}
			}
		}
	}
}

@media (max-width: 768px) {
	main {
		grid-template-columns: 1fr;
		margin: var(--spacing-xl) var(--spacing-lg);
		gap: var(--spacing-xl);
	}

	main .info h1 {
		font-size: 1.6rem;
	}

	main .info {
		padding: var(--spacing-xl);
	}

	main #contact-form {
		padding: var(--spacing-xl);
	}
}