.hero-card {
	padding-block: var(--md);
	
	&.lg {
		/* width: 46rem; */
		width: 60ch;
		max-width: calc(100vw - var(--lg) * 2);
		padding-block: var(--lg);
		.hero-card__photo {
			width: 20rem;
			height: 20rem;
			> i {
				font-size: 10rem;
			}
		}
	}

	.h1 {
		text-align: center;
		line-height: 1;
		@media (width < 500px) {
			line-break: anywhere;
		}
	}

	.bio {
		.h2 {
			line-height: inherit;
		}
	}
	
	&:is(a[href]) {
		&:hover,
		&:focus-visible {
			scale: 105%;
			.hero-card__photo {
				background-color: color-mix(in srgb, color-mix(in srgb, var(--col-gray) 80%, var(--col-interactive)), transparent);
				/* > img {
					filter: saturate(125%) brightness(117%);
				} */
			}
		}
	}
}

.hero-card__photo {
	width: 10rem;
	height: 10rem;
	border-radius: 999rem;
	overflow: hidden;
	display: grid;
	place-items: center;
	background-color: color-mix(in srgb, var(--col-gray), transparent);
	> img {
		object-fit: cover;
		width: 100%;
		height: 100%;
		transition: var(--transition);
	}
	> i {
		font-size: 5rem;
		opacity: 40%;
	}
}