body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}

.container-login {
	display: flex;
	justify-content: center;
	gap: 40px;

	.column {
		flex: 1;
	}

	@media (max-width: 768px) {
		flex-direction: column;

		height: 100vh;
	}
}

.container-content-login {
	display: flex;
	flex-direction: column;
	padding: 0 100px;
	padding-top: 50px;
	position: relative;
	height: 100%;

	/* TODO: LOGO  */
	.container-logo {
		display: flex;
		gap: 20px;
		align-items: center;
		margin-top: 50px;
		text-decoration: none;
		position: absolute;
		top: -70px;
		color: #333;

		img {
			width: 50px;
		}

		.logo-text {
			font-size: 22px;

			font-weight: 700;
		}
	}

	@media (max-width: 768px) {
		padding: 0 20px;
		height: 100%;
		justify-content: center;

		.container-logo {
			top: 0;
			margin-top: 30px;
			align-self: center;

			.logo-text {
				font-size: 26px;
			}
		}
	}
}

.container-form {
	display: flex;
	flex-direction: column;
	gap: 20px;

	h1 {
		font-family: var(--title-font);
		text-align: center;
		margin-top: 20px;
		font-size: 40px;
		font-weight: 700;
	}

	p {
		font-size: 18px;
		margin-top: 10px;
		color: #333;
		text-align: center;
	}

	.container-buttons {
		display: flex;
		margin-top: 10px;

		button {
			flex: 1;

			display: flex;
			justify-content: center;
			gap: 10px;

			padding: 12px;
			background: none;

			border-radius: 5px;
			border: 1px solid #333;
			color: #333;

			font-size: 16px;
			font-weight: 500;
			letter-spacing: 0;
			cursor: pointer;
			transition: 0.3s;

			&:hover {
				background-color: #333;
				color: #fff;
			}
		}
	}

	.container-divider {
		display: flex;
		align-items: center;
		gap: 10px;

		.divider {
			flex: 1;
			height: 1px;
			background-color: #333;
		}

		.text-divider {
			color: #333;
			font-size: 18px;
		}
	}

	form {
		display: flex;
		flex-direction: column;
		gap: 20px;

		.container-input {
			position: relative;
		}

		input {
			width: 100%;
			padding: 15px 10px;
			border-radius: 5px;
			border: 1px solid #333;
			font-size: 16px;
			font-weight: 500;
			font-family: inherit;
			outline: none;
			color: #333;
			background: none;

			&::placeholder {
				color: #888;
				font-weight: 400;
			}
		}

		i {
			position: absolute;
			top: 50%;
			right: 10px;
			transform: translateY(-50%);
			color: #333;
			cursor: pointer;
		}

		a {
			text-decoration: none;
			color: var(--primary-color);
			align-self: flex-end;
			margin-bottom: 10px;

			&:hover {
				text-decoration: underline;
			}
		}

		button {
			border: none;
			padding: 15px;
			border-radius: 5px;
			background-color: var(--primary-color);
			font-family: inherit;
			color: #fff;
			font-size: 16px;
			font-weight: 400;
			cursor: pointer;
			transition: 0.3s;
		}
	}

	.link {
		font-size: 16px;

		a {
			text-decoration: none;
			color: var(--primary-color);
			align-self: flex-end;

			&:hover {
				text-decoration: underline;
			}
		}
	}
}

.column-img {
	padding: 30px 0;

	.container-img {
		width: 100%;
		height: 100%;
		border-radius: 25px;
		overflow: hidden;
		box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	@media (max-width: 768px) {
		display: none;
	}
}