.supt-card-text {
	@extend %expand-link;

	display: flex;
	flex-direction: column;
	gap: $spacing-4;

	@media (min-width: $breakpoint-md) {
		gap: $spacing-6;
	}

	&__head {
		aspect-ratio: 4 / 3;
		overflow: hidden;

		&__inner {
			width: 100%;
			height: 100%;
		}

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}
	}

	&__body {
		display: flex;
		flex-direction: column;
		gap: $spacing-1-5;
		padding-right: $spacing-6;

		@media (min-width: $breakpoint-md) {
			gap: $spacing-3;
		}

		h2,
		h3,
		h4 {
			@extend %t-h4;
			margin-bottom: 0;
		}

		p {
			@extend %t-body-s;
			color: $color-grey-5;

			&.supt-card-text__subtitle {
				@extend %t-body-sm;
				color: $color-black;
			}
		}
	}

	&.-has-link {
		@mixin card-hover .supt-card-text;
	}
}