@media (max-width: 768px) {
	body.login-page {
		min-height: 100vh;
		height: auto;
		overflow-y: auto;
	}

	.login-page .page-shell {
		min-height: 100vh;
	}

	.login-page .login-splash {
		background: var(--primary);
	}

	.login-page .login-splash-logo {
		width: 76px;
	}

	.login-page .login-splash-logo-end {
		width: 76px;
	}

	.login-page .login-header {
		display: contents;
	}

	.login-page .login-logo {
		order: 1;
		align-self: flex-start;
		width: 64px;
		margin: 32px 0 0 24px;
	}

	.login-page .login-main {
		order: 2;
		flex: 1;
		padding: 48px 16px 24px;
	}

	.login-page .login-card {
		width: 100%;
		max-width: 396px;
		padding: 32px 20px;
		border-radius: 30px;
	}

	.login-page .login-card h1 {
		font-size: 47px;
	}

	.login-page .login-underline {
		width: 88px;
	}

	.login-page .login-form {
		gap: 18px;
	}

	.login-page .input-field input {
		height: 48px;
		font-size: 20px;
	}

	.login-page .login-actions {
		margin-top: 18px;
		gap: 18px;
		flex-direction: column;
		align-items: center;
	}

	.login-page .login-actions .btn {
		width: 180px;
		height: 48px;
		font-size: 16px;
	}

	.login-page .login-header-actions {
		order: 3;
		position: static;
		transform: none;
		width: 100%;
		display: flex;
		justify-content: center;
		margin: 20px auto 0;
		gap: 24px;
		font-size: 20px;
	}

	.login-page .login-header-text {
		font-size: 20px;
	}

	.login-page .login-header-signup {
		font-size: 16px;
		height: 49px;
	}

	.login-page .login-footer {
		order: 4;
		position: static;
		transform: none;
		padding: 20px 0 28px;
		gap: 28px;
		font-size: 16px;
	}
}

@media (max-width: 420px) {
	.login-page .login-logo {
		margin: 24px 0 0 16px;
	}

	.login-page .login-main {
		padding: 40px 12px 20px;
	}

	.login-page .login-card {
		padding: 28px 16px;
	}

	.login-page .login-card h1 {
		font-size: 40px;
	}

	.login-page .input-field input {
		font-size: 18px;
	}

	.login-page .login-header-actions {
		gap: 16px;
		margin-top: 16px;
	}

	.login-page .login-header-text {
		font-size: 20px;
	}

	.login-page .login-footer {
		gap: 20px;
		font-size: 14px;
		padding-bottom: 20px;
	}
}
