@layer components {
	@scope (.contact-page) {
		:scope > .auto-grid {
			--grid-min-size: clamp(16rem, 40vw, 28rem);
			gap: calc(var(--gutter) * 2.5);
			align-items: start;
		}

		.contact-info {
			display: flex;
			flex-direction: column;
			gap: calc(var(--gutter) * 2);
		}

		.contact-info__intro {
			display: flex;
			flex-direction: column;
			gap: calc(var(--gutter) * 0.75);
		}

		.contact-info__intro p {
			font-size: var(--font-size-lg);
			color: var(--color-text-muted-invert);
		}

		.contact-info__details {
			display: flex;
			flex-direction: column;
			gap: var(--gutter);
		}

		.contact-info__details > div {
			border-block-start: 1px solid var(--color-border);
			padding-block-start: calc(var(--stack) * 0.75);
		}

		.contact-info__details > div > p:first-child {
			font-size: var(--font-size-xs);
			font-weight: var(--font-weight-medium);
			text-transform: uppercase;
			letter-spacing: 0.12em;
			color: var(--color-text-muted-invert);
			margin-block-end: calc(var(--stack) / 4);
		}

		.contact-info__details > div > p:last-child {
			font-family: var(--font-family-heading);
			font-size: var(--font-size-xl);
			font-weight: var(--font-weight-medium);
			letter-spacing: -0.02em;
		}

		.contact-info__details a {
			text-decoration: none;
			color: inherit;
		}

		.contact-form {
			background-color: var(--color-bg-card);
			padding: calc(var(--gutter) * 2.5);
			border-radius: 12px;
		}

		.contact-form h2 {
			font-size: var(--font-size-xl);
			font-weight: var(--font-weight-bold);
			letter-spacing: -0.02em;
			margin-block-end: var(--stack);
		}

		.contact-form form {
			display: flex;
			flex-direction: column;
			gap: var(--gutter);
		}

		.contact-form__row {
			display: flex;
			gap: var(--gutter);
		}

		.contact-form__row label {
			flex: 1;
		}

		.contact-form label {
			display: block;
			font-size: var(--font-size-xs);
			font-weight: 500;
			color: var(--color-text);
		}

		.contact-form input,
		.contact-form textarea {
			inline-size: 100%;
			margin-block-start: calc(var(--stack) / 4);
			background-color: var(--color-bg);
			border: 1px solid transparent;
			border-radius: 6px;
			padding: calc(var(--stack) * 0.4) calc(var(--gutter) / 2);
			font-size: var(--font-size-sm);
			font-family: inherit;
		}

		.contact-form button {
			margin-block-start: calc(var(--stack) / 2);
			justify-content: center;
		}

		@media (max-width: 49.999em) {
			.contact-form__row {
				flex-direction: column;
			}
		}
	}
}