/*
 * About section: image duo with dot pattern + heading, checklist, CTA.
 */

.asli-about {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--asli-space-3xl);
	align-items: center;
}

/* ---------------------------------------------------------------- media */

.asli-about__media {
	position: relative;
	padding-block-end: var(--asli-space-3xl);
	padding-inline-end: var(--asli-space-3xl);
}

/* Dot pattern behind the top-right corner. */
.asli-about__media::before {
	content: "";
	position: absolute;
	top: -1.25rem;
	inset-inline-end: 0.75rem;
	width: 9rem;
	height: 11rem;
	background-image: radial-gradient(var(--asli-border) 2.5px, transparent 2.5px);
	background-size: 1.25rem 1.25rem;
	z-index: 0;
}

.asli-about__img-main {
	position: relative;
	display: block;
	width: 88%;
	border-radius: var(--asli-radius-card);
	z-index: 1;
}

.asli-about__img-small {
	position: absolute;
	inset-inline-end: 0;
	bottom: 0;
	width: 55%;
	border: 8px solid var(--asli-surface);
	border-radius: var(--asli-radius-card);
	z-index: 2;
	display: block;
}

/* -------------------------------------------------------------- content */

.asli-about__content .asli-heading {
	margin-bottom: var(--asli-space-lg);
}

.asli-about__checklist {
	margin-block: var(--asli-space-lg);
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 1024px) {
	.asli-about {
		grid-template-columns: 1fr;
		gap: var(--asli-space-2xl);
	}
}