/* Sekcja: O mnie. */

.ajs-about {
	background: linear-gradient(
		180deg,
		var(--ajs-bg-soft) 0%,
		color-mix(in srgb, var(--ajs-pink-soft) 45%, var(--ajs-bg-soft)) 32%,
		color-mix(in srgb, var(--ajs-pink-soft) 75%, var(--ajs-bg-soft)) 62%,
		color-mix(in srgb, var(--ajs-pink-soft) 45%, var(--ajs-bg-soft)) 86%,
		var(--ajs-bg) 100%
	);
}

.ajs-about__grid {
	display: grid;
	gap: clamp(2rem, 5vw, 3.75rem);
	align-items: start;
}

@media (min-width: 62rem) {
	.ajs-about__grid {
		grid-template-columns: 1fr 0.56fr;
	}
}

.ajs-about__title {
	font-weight: 700;
	font-size: clamp(1.6rem, 1.2rem + 2vw, 2.125rem);
	letter-spacing: -0.01em;
	margin: 0 0 clamp(1.25rem, 3vw, 2.5rem);
}

.ajs-about__name {
	font-family: 'Montserrat', system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.906rem;
	margin: 0 0 8px;
}

.ajs-about__actions {
	display: flex;
	justify-content: center;
	margin-top: clamp(1.25rem, 3vw, 2.125rem);
}

/*
 * Do 62rem zdjecie ma byc widoczne w calosci — stad wezsza kolumna, wyrownanie
 * do lewej i brak przycinania. Sztywna wysokosc z designu wchodzi dopiero na
 * desktopie, gdzie kadr jest czescia ukladu dwukolumnowego.
 */
.ajs-about__portrait {
	margin: 0;
	max-width: 18rem;
}

.ajs-about__portrait img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 3px 5px 30px rgb(0 0 0 / 22%);
}

@media (min-width: 62rem) {
	.ajs-about__portrait {
		max-width: none;
	}

	.ajs-about__portrait img {
		height: 28.75rem;
		object-fit: cover;
		object-position: top center;
	}
}