/* Slider */
#slider {
	background-color: var(--color-neutral-300);
	height: 25rem;
}

#bgr {
	opacity: 0.7;
	filter: invert(1);
}

#title {
	font-size: 4.5rem;
	letter-spacing: 1rem;
}

/* Body */
#body {
	padding-top: 8rem;
	padding-bottom: 7rem;
}

.stitle {
	font-size: 2.5rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Contact data */
#data .line {
	background-color: var(--surface-secondary);
	height: 1px;
}

.soc-icon {
	width: 1.4rem;
	height: 1.4rem;
}

.soc-icon svg {
	fill: var(--text-color-strong);
}

.data-txt {
	margin-bottom: 10px;
}

/* Contact form */
.form-label {
	padding-top: 1rem;
	transform-origin: left;
	transform: translateY(2rem) scale(1);
	line-height: 1rem;
	pointer-events: none;
	z-index: 1;
	transition: transform 0.2s, color 0.2s;
}

.contact-form-field:has(:focus) .form-label,
.contact-form-field:has(input:not(:placeholder-shown)) .form-label,
.contact-form-field:has(textarea:not(:placeholder-shown)) .form-label {
	color: var(--color-primary-400);
	transform: translateY(0.5rem) scale(0.9);
}

.form-inp {
	line-height: 3rem;
}

#submit {
	font-size: 1rem;
}

/* Responsive */
@media (max-width: 1024px) {
	#body {
		padding: 0;
	}

	#grid {
		display: flex;
		flex-direction: column;
		grid-gap: 0;
	}

	.grid-cell {
		width: 600px;
		max-width: 100%;
		margin: 0 auto;
	}

	#form {
		order: 1;
		padding: 4rem 0;
		border-bottom: 2px solid #999;
	}

	#data {
		order: 2;
		padding: 4rem 0;
	}
}