.login--wrapper {
	gap: 0;

	.login--type {
		gap: 0;

		.login--image {
			aspect-ratio: 10/6;
			overflow: hidden;
			img {
				width: 100%;
			}
		}

		.login--lines {
			display: none;
		}

		.login--content {
			padding: 2.5rem 1rem;
			position: relative;

			.login--button {
				text-align: center;
			}

			.button {
				max-width: max-content;
				white-space: nowrap;
			}

			.login--button {
				position: absolute;
				left: 50%;
				top: 0;
				transform: translate(-50%, -40%);
			}

			* {
				font-family: var(--font__sans-serif-condensed);
				font-weight: 500;
				z-index: 9;
			}

			.large-title,
			.small-title {
				text-align: center;
				margin: 0;
			}

			.large-title {
				span {
					font-family: var(--font__serif);
					font-style: italic;
					font-size: calc(
						var(--font-size__base, 18px) *
							var(--font-factor__h1, 1.5)
					);
					padding-left: 0.35rem;
				}
			}

			.small-title {
				font-size: 1.35rem;
			}
		}

		.login--member {
			* {
				color: var(--brand-bright-blue);
			}
		}

		.login--public {
			* {
				color: var(--brand-blue);
			}

			.large-title {
				span {
					color: var(--brand-teal);
				}
			}
		}
	}

	.login--footer {
		padding-top: 1.5rem;
		padding-bottom: 2rem;
		align-items: center;

		.login--links,
		.login--social {
			align-items: center;
		}

		.login--links {
			&:before,
			&:after {
				flex: 0 0 auto;
				content: '';
				display: block;
				height: 1.35rem;
				border-right: 3px solid #ddd;
			}
			&:before {
				order: 2;
			}
			&:after {
				order: 4;
			}
			a {
				text-transform: uppercase;
				color: var(--brand-blue);
				font-weight: 600;
				font-family: var(--font__sans-serif-condensed);
				line-height: 1;
				font-size: calc(
					var(--font-size__base, 18px) * var(--font-factor__h4, 1.2)
				);

				&:nth-of-type(1) {
					order: 1;
				}
				&:nth-of-type(2) {
					order: 3;
				}
				&:nth-of-type(3) {
					order: 5;
				}
			}
		}

		.login--social {
			h4 {
				margin: 0;
			}

			a {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			i {
				line-height: 1;
				max-width: max-content;
				max-height: max-content;
				font-size: 1.5rem;
			}
		}
	}
}

@media screen and (min-width: 660px) {
}
@media screen and (min-width: 850px) {
	.login--wrapper {
		.login--type {
			flex-wrap: nowrap;

			.login--lines {
				display: block;
				margin-bottom: -100%;
				grid-column: 1 / span 2;
				grid-row: 2;
				z-index: 1;
				mix-blend-mode: overlay;
				opacity: 0.5;
				transform: scaleY(0.8);
				transform-origin: top;
			}

			.login--content {
				padding: 2.5rem 1.5rem 3rem;
			}
		}
		.grid-4 {
			overflow: hidden;
			display: grid;
			grid-template-columns: 1fr 1fr;

			.login--member {
				&.login--image {
					grid-column: 1;
					grid-row: 1;
				}
				&.login--content {
					grid-column: 1;
					grid-row: 2;
				}
			}

			.login--public {
				&.login--image {
					grid-column: 2;
					grid-row: 1;
				}
				&.login--content {
					grid-column: 2;
					grid-row: 2;
				}
			}
		}
	}
}