.detail_services .services-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--pk-column-gap);
	margin-top: max(1.5rem, calc(1.5 * var(--su)));
}

.detail_services .service-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: max(1.5rem, calc(1.5 * var(--su)));
	background-color: var(--support-1);
	color: var(--primary-100);
	text-decoration: none;
}

.detail_services .service-card .type {
	display: flex;
	align-items: center;
	gap: max(.5rem, calc(.5 * var(--su)));
	margin-bottom: max(1rem, calc(1.5 * var(--su)));
}

.detail_services .service-card .badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: max(2rem, calc(2 * var(--su)));
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--white-100);
	outline: 1px solid var(--primary-10);
	outline-offset: -1px;
	color: var(--accent-100);
}

.detail_services .service-card .badge.icon-mask::after,
.detail_services .service-card .badge.icon-font::after {
	content: none;
}

.detail_services .service-card .badge.icon-mask::before {
	content: '';
	display: block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	mask: var(--mask-url) center / contain no-repeat;
}

.detail_services .service-card .badge.icon-font::before {
	content: attr(data-icon);
	font-family: 'Material Symbols Outlined';
	font-size: 1.25em;
	font-weight: 300;
	line-height: 1;
	font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

.detail_services .service-card .title {
	margin: 0 0 max(.5rem, calc(.5 * var(--su)));
}

.detail_services .service-card .text {
	margin: 0;
	font-size: var(--body-s-regular);
}

@media screen and (max-width: 600px) {
	.detail_services .services-grid {
		grid-template-columns: 1fr;
	}
}