.doctor-skills {
	background-color: var(--surface-warm);
}

.doctor-skills__layout {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: clamp(var(--spacing-32), 5vw, calc(var(--spacing-32) * 2));
}

.doctor-skills__head h2 {
	max-width: 520px;
	color: var(--color-off-black);
	font-size: clamp(28px, 3.5vw, var(--font-size-heading));
	line-height: var(--line-height-heading);
}

.doctor-skills__head p {
	max-width: 460px;
	margin-top: var(--spacing-14);
	color: var(--color-gray-dark);
	font-size: var(--font-size-md);
	line-height: var(--line-height-body);
}

.doctor-skills__list {
	display: grid;
	gap: var(--spacing-14);
}

.doctor-skills__list li {
	display: grid;
	grid-template-columns: var(--spacing-10) minmax(0, 1fr);
	gap: var(--spacing-14);
	align-items: start;
}

.doctor-skills__list li::before {
	width: var(--spacing-6);
	height: var(--spacing-6);
	margin-top: 0.78em;
	border-radius: var(--radius-pill);
	background-color: var(--color-blue);
	content: "";
}

.doctor-skills__list strong {
	color: var(--color-off-black);
	font-size: clamp(var(--font-size-md), 2vw, var(--font-size-xl));
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-body);
}

.doctor-skills__note {
	max-width: 760px;
	margin-top: var(--spacing-24);
	color: var(--color-gray-dark);
	font-size: var(--font-size-md);
	line-height: var(--line-height-body);
}

@media (max-width: 820px) {
	.doctor-skills__layout {
		grid-template-columns: minmax(0, 1fr);
	}
}