/*
 * Shared two-column layout: illustration on the left, content on the right.
 * Used by .rr-auth (login, register, lost password) and .rr-privacy pages.
 */

.rr-auth,
.rr-privacy {
	--rr-accent: #009cff;
	--rr-accent-dark: #0086db;
	--rr-heading: #111111;
	--rr-text: #5e5e5e;
	--rr-label: #222222;
	--rr-border: #d4d4d4;
	--rr-divider: #e2e2e2;
	--rr-placeholder: #9a9a9a;
	--rr-font-heading: "Lato", sans-serif;
	--rr-font-body: "Cabin", sans-serif;

	gap: 72px;
	margin: 0;
	padding: 32px 8px;
}

.rr-auth > .rr-auth__media,
.rr-privacy > .rr-privacy__media {
	flex: 1 1 48% !important;
}

.rr-auth > .rr-auth__form,
.rr-privacy > .rr-privacy__content {
	flex: 1 1 52% !important;
}

.rr-auth .rr-auth__image,
.rr-privacy .rr-privacy__image {
	margin: 0;
}

.rr-auth .rr-auth__image img,
.rr-privacy .rr-privacy__image img {
	display: block;
	width: 100%;
	height: auto;
	/* The artwork has an off-white background; multiply blends it into the white card. */
	mix-blend-mode: multiply;
}

@media (max-width: 1100px) {
	.rr-auth,
	.rr-privacy {
		gap: 44px;
	}
}

@media (max-width: 781px) {
	.rr-auth,
	.rr-privacy {
		gap: 20px;
		padding: 0;
	}

	.rr-auth > .rr-auth__media,
	.rr-auth > .rr-auth__form,
	.rr-privacy > .rr-privacy__media,
	.rr-privacy > .rr-privacy__content {
		flex-basis: 100% !important;
	}

	.rr-auth .rr-auth__image img,
	.rr-privacy .rr-privacy__image img {
		max-width: 280px;
		margin: 0 auto;
	}
}