.therapies .cards {display: flex; flex-direction: column; gap: 1rem;}

@media screen and (min-width: 40em) {
	.therapies .cards {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-column-gap: 2rem;
		grid-row-gap: 2rem;
	}
}

.therapies .cards .therapy {
	display: flex; align-items: center; position: relative; width: 100%; padding: 2rem;
	border-radius: 20px; background-color: white; box-shadow: 0 8px 20px rgba(155, 175, 205, 0.28);
}
.therapies .cards .therapy:before {
	content: ''; position: absolute; inset: 0; border-radius: 20px; padding: 2px;
	background: linear-gradient(20deg, var(--color-main), white 70%);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude; pointer-events: none;
}
.therapies .cards .therapy:hover {box-shadow: 0 6px 15px rgba(105, 125, 155, 0.5);}
.therapies .cards .therapy:hover:before {background: linear-gradient(20deg, var(--color-main), white 90%);}

.therapies .cards .therapy a {
	position: absolute; top: 0; right: 0; width: 100%; height: 100%; border-radius: 20px;
}
.therapies .cards .therapy .icon {
	width: 90px; height: 90px; border-radius: 50%; text-align: center; line-height: 90px;
	background: linear-gradient(#ddcdf8, white);
}
.therapies .cards .therapy .icon img {width: 50px; height: 50px; filter: brightness(0);}
.therapies .cards .therapy .title {
	flex-grow: 1; width: min-content; padding-right: 2rem; font-size: 1rem; font-weight: bold;
}