/* Sekcja: Lekcje — 4 kroki. */

.ajs-lessons {
	background: var(--ajs-bg);
}

.ajs-lessons__glow {
	position: absolute;
	top: -8.75rem;
	right: -11.25rem;
	width: 43.75rem;
	height: 32.5rem;
	background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ajs-pink-strong) 30%, transparent) 0%, transparent 68%);
	pointer-events: none;
}

.ajs-lessons__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.375rem);
	align-items: stretch;
}

@media (min-width: 40rem) {
	.ajs-lessons__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 68rem) {
	.ajs-lessons__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ajs-card {
	position: relative;
	border-radius: 14px;
	padding: 22px 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	overflow: hidden;
}

.ajs-card--strong {
	background: var(--ajs-pink-strong);
}

.ajs-card--soft {
	background: var(--ajs-pink-soft);
}

/*
 * `multiply` zamiast zwyklego nalozenia: ikony bywaja zapisane na bialym tle
 * zamiast na przezroczystosci — z multiply biel znika, zostaje sam rysunek.
 */
.ajs-card__watermark {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	height: 9.375rem;
	width: auto;
	max-width: 62%;
	object-fit: contain;
	opacity: 0.12;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.ajs-card__number {
	position: relative;
	font-family: 'Montserrat', system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.875rem;
	line-height: 1;
	letter-spacing: -0.02em;
	margin: 0;
}

.ajs-card--strong .ajs-card__number {
	color: var(--ajs-dark);
}

.ajs-card--soft .ajs-card__number {
	color: var(--ajs-pink-ink);
}

.ajs-card__head {
	position: relative;
}

.ajs-card__title {
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--ajs-ink);
}

.ajs-card__subtitle {
	font-style: italic;
	font-size: 1.125rem;
	line-height: 1.25;
	margin: 2px 0 0;
}

.ajs-card__rule {
	position: relative;
	width: 34px;
	height: 2px;
}

.ajs-card--strong .ajs-card__rule {
	background: rgb(255 255 255 / 60%);
}

.ajs-card--soft .ajs-card__rule {
	background: var(--ajs-pink);
}

.ajs-card__desc {
	position: relative;
	margin: 0;
	font-size: 0.78rem;
	font-weight: 500;
	line-height: 1.6;
}

.ajs-card .ajs-check {
	position: relative;
	margin-top: 2px;
}

.ajs-card--strong .ajs-check__mark {
	color: #fff;
}

.ajs-card--soft .ajs-check__mark {
	color: var(--ajs-pink);
}