/* How-it-works steps. */
.ph-steps__head { margin-bottom: 36px; text-align: center; }
.ph-steps__head p { margin: 6px 0 0; opacity: 0.75; }

.ph-steps__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ph-steps__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

/* The connector is drawn on the item, not as a separate element, so it disappears
   by itself when the grid wraps to a new row. */
.ph-steps--horizontal .ph-steps__item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 28px;
	inset-inline-start: calc(50% + 34px);
	width: calc(100% - 68px);
	height: 2px;
	background: var(--pharmacy-border);
}

.ph-steps__marker {
	position: relative;
	flex: 0 0 56px;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--pharmacy-primary);
	color: #fff;
}

.ph-steps__num {
	position: absolute;
	top: -4px;
	inset-inline-end: -4px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--pharmacy-secondary);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
}

.ph-steps__body h3 { margin: 0 0 4px; font-size: 1rem; }
.ph-steps__body p { margin: 0; font-size: 0.88rem; opacity: 0.75; }
.ph-steps__cta { margin-top: 32px; }

.ph-steps--vertical .ph-steps__list {
	grid-template-columns: 1fr;
	max-width: 620px;
	margin-inline: auto;
}

.ph-steps--vertical .ph-steps__item {
	flex-direction: row;
	align-items: flex-start;
	text-align: start;
}