#homes-page {
	max-width: 30rem;
	margin: 0 auto;
	padding: 2rem 1rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	grid-gap: 2rem;

	.images {
		display: flex;
		justify-content: center;
		align-items: center;
		width: clamp(100%, 50vw, 600px);
	}

	.image {
		width: 50%;
		padding: 16px;
	}

	.image:not(:last-child) {
		border-right: 1px solid var(--light-gray);
	}

	.title {
		margin: 0 auto;
	}

	.subtitle {
		margin: 0 auto;
		text-transform: uppercase;
		font-size: 1.1rem;
		font-weight: 500;
	}

	.icon-links {
		margin: 0 auto;
		display: flex;
		justify-content: center;
		gap: .5rem;
	}

	.icon-link {
		transition: .2s;

		svg {
			width: 2rem;
			height: 2rem;
		}

		&:hover {
			transform: scale(1.1);
		}
	}

	.bar-links {
		display: grid;
		grid-gap: .5rem;
		width: 100%;
	}

	.bar-link {
		transition: .2s;
		background-color: black;
		padding: 1.5rem;
		font-size: 1.2rem;
		text-decoration: none;
		color: var(--light-gray);
		border-radius: .2rem;

		&:hover {
			transform: scale(1.05);
		}
	}

	.face {
		width: 10rem;
		height: 10rem;
		border-radius: 999rem;
		margin: 0 auto;
	}
	
	.form {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		width: 100%;
	}

	.field {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: .2rem;
	}

	.checkfield {
		width: 100%;
		display: flex;
		align-items: flex-start;
		gap: .5rem;
	}

	.label {
		text-align: start;
	}

	.input {
		height: 3rem;
		width: 100%;
		background-color: rgba(0,0,0,.1);
		background: linear-gradient(
			135deg,
			var(--dark-gray-2),
			var(--dark-gray-1),
			var(--dark-gray-2),
			var(--dark-gray-1),
			var(--dark-gray-2),
		);
		border: none;
		border-bottom: 1px groove var(--light-gray);
		color: var(--light-gray);
		font-size: 1rem;
		transition: .2s;
		padding: .5rem 0;
		&:focus {
			padding: .5rem;
		}
	}

	.link {
		color: var(--light-gray);
	}

	.textarea {
		font-family: inherit;
		width: 100%;
		background-color: rgba(0,0,0,.1);
		background: linear-gradient(
			135deg,
			var(--dark-gray-2),
			var(--dark-gray-1),
			var(--dark-gray-2),
			var(--dark-gray-1),
			var(--dark-gray-2),
		);
		border: none;
		border-bottom: 1px groove var(--light-gray);
		color: var(--light-gray);
		font-size: 1rem;
		height: 8rem;
		resize: vertical;
		transition: .2s;
		padding: .5rem 0;
		&:focus {
			padding: .5rem;
		}
	}

	.submit-container {
		width: 100%;
	}

	.submit {
		width: 100%;
		padding: .7rem;
		font-size: 1rem;
		cursor: pointer;
		border: 1px groove var(--light-gray);
		background-color: rgba(0,0,0,.1);
		color: var(--light-gray);
		border-radius: .2rem;
		text-align: center;
	}
}