.alp-beginner {
	padding: 112px 0;
}

.alp-beginner__layout {
	display: grid;
	grid-template-columns: 42% 58%;
	gap: 64px;
}


/* =========================================================
   Visual
========================================================= */

.alp-beginner__visual {
	min-width: 0;
}

.alp-beginner__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;

	min-height: 520px;
	height: 100%;

	background:
		linear-gradient(
			135deg,
			#eef3f7,
			#dfe8ef
		);

	color: #8796a5;

	font-family: "Outfit", sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: .05em;
}


/* =========================================================
   Content
========================================================= */

.alp-beginner__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.alp-beginner__lead {
	margin: 0 0 36px;

	color: #000000;
	font-size: 1.05rem;
	line-height: 1.9;
}

.alp-beginner__steps {
	display: grid;
	gap: 0;

	margin: 0;
	padding: 0;

	list-style: none;
}

.alp-beginner__step {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr);
	gap: 20px;

	padding: 22px 0;

	border-bottom: 1px solid #dbe2e9;
}

.alp-beginner__step:first-child {
	border-top: 1px solid #dbe2e9;
}

.alp-beginner__number {
	font-family: "Outfit", sans-serif;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: .08em;

	color: #a52a2a;
}

.alp-beginner__step-title {
	margin: 0 0 6px;

	font-family: "Outfit", sans-serif;
	font-size: 1.15rem;
	font-weight: 700;

	color: #b91313;
}

.alp-beginner__step-text {
	margin: 0;

	color: #000000;
	line-height: 1.7;
}

.alp-beginner__actions {
	margin-top: 32px;
	display: flex;
	justify-content: flex-end;	
}

.alp-beginner__button {
	display: flex;
	align-items: center;
	justify-content: space-between;

	width: 50%;
	min-height: 58px;
	padding: 0 24px;

	border: 1px solid #0b2b50;
	border-radius: 8px;

	background: #0b2b50;
	color: #fff;

	font-family: "Outfit", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;

	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		transform 0.25s ease;
}

.alp-beginner__button span:last-child {
	transition: transform 0.25s ease;
}

.alp-beginner__button:hover,
.alp-beginner__button:focus-visible {
	border-color: #a52a2a;
	background: #a52a2a;
	color: #fff;
	transform: translateY(-2px);
}

.alp-beginner__button:hover span:last-child,
.alp-beginner__button:focus-visible span:last-child {
	transform: translateX(5px);
}

/* =========================================================
   Beginner - Tablet
========================================================= */

@media (max-width: 1024px) {

	.alp-beginner__layout {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.alp-beginner__placeholder {
		min-height: 360px;
	}

	.alp-beginner__content {
		justify-content: flex-start;
	}
}


/* =========================================================
   Beginner - Mobile
========================================================= */

@media (max-width: 768px) {

	.alp-beginner {
		padding: 72px 0;
	}

	.alp-beginner__layout {
		gap: 28px;
	}

	.alp-beginner__placeholder {
		min-height: 240px;

		font-size: 0.85rem;
	}

	.alp-beginner__lead {
		margin-bottom: 24px;

		font-size: 1rem;
		line-height: 1.9;
	}

	.alp-beginner__step {
		grid-template-columns: 42px minmax(0, 1fr);
		gap: 14px;

		padding: 18px 0;
	}

	.alp-beginner__number {
		font-size: 0.8rem;
	}

	.alp-beginner__step-title {
		margin-bottom: 4px;

		font-size: 1.05rem;
	}

	.alp-beginner__step-text {
		font-size: 0.9rem;
		line-height: 1.7;
	}

	.alp-beginner__actions {
		margin-top: 28px;
		justify-content: stretch;
	}

	.alp-beginner__button {
		width: 100%;
		min-height: 54px;
		padding: 0 20px;

		font-size: 0.95rem;
	}
}

@media (max-width: 768px) {
	.alp-beginner__lead,
	.alp-beginner__step-title {
		text-wrap: balance;
	}
}