.services__hero {
	display: grid;
	isolation: isolate;
}

.services__hero > * {
	grid-column: 1/-1;
	grid-row: 1/-1;
}

.services__hero img {
	width: 100%;
	height: 100%;
	max-height: 20rem;
	object-position: center;
	object-fit: cover;
	filter: brightness(80%);
	z-index: -1;
}

.services__hero .hero__content {
	display: grid;
	place-items: center;
	height: fit-content;
	align-self: center;
	padding: 2rem;
	text-align: center;
	color: var(--clr-jv-white);
	gap: 1rem;
}

.hero__content h1 {
	font-size: var(--fs-jv-title-lg);
	letter-spacing: (--ls-jv-title-lg);
	line-height: var(--lh-jv-title-lg);
}

.services {
	padding: 5rem 2rem;
}

.services__content,
.services__grid {
	max-width: 70rem;
	margin-inline: auto;
	text-align: center;
	display: grid;
}

.services__content {
	gap: 0.5rem;
}

.services__content h2 {
	color: var(--clr-jv-teal_dark);
	font-size: var(--fs-jv-title-md);
	letter-spacing: var(--ls-jv-title-md);
	line-height: var(--lh-jv-title-md);
}

.services__grid {
	margin-top: 2rem;
	gap: 2rem;
}

.service__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.service__card h3 {
	color: var(--clr-jv-teal_dark);
	font-size: var(--fs-jv-title-sm);
	letter-spacing: var(--ls-jv-title-sm);
	line-height: var(--lh-jv-title-sm);
}

.service__card p {
	flex-grow: 1;
	max-width: 42ch;
	margin-inline: auto;
}

@media screen and (min-width: 768px) {
	.services__grid {
		grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
	}
}