@layer layout {
}

@layer components {
	.reg-letter {
		& label {
			aspect-ratio: 3 / 4;
			object-fit: cover;
			background: white;
			color: var(--bs-tertiary-color);

			& > input[type="file"] {
				opacity: 0;
				z-index: 1;
				cursor: pointer;
			}

			& > div {
				& > svg {
					width: 3rem;
					aspect-ratio: 1 / 1;
					fill: currentColor;
				}

				& > span {
					@media (max-width:767.98px) {
						font-size: 0.55rem;
					}

				}

			}

			&:hover {
				background: var(--bs-tertiary-bg);
			}

		}

		&.has-file {
			& label {
				background: var(--bs-success-bg-subtle);
				color: var(--bs-success-text-emphasis);
				--bs-border-color: var(--bs-success-border-subtle);
			}

		}

		& > span {
			@media (max-width:767.98px) {
				font-size: 0.55rem;
			}

		}

	}

	.reg-letter--demo {
		& a,
		& img {
			background: white;
			aspect-ratio: 3 / 4;
			object-fit: cover;
			display: flex;
		}

	}

	.reg-letter--letter,
	.reg-letter--proxy {
		&:hover {
		}

	}

}

@layer registration-step-3 {
}