.supt-card-news {
	@mixin card-hover .supt-card-news;

	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 {
		@mixin clamp gap, $spacing-1-5, $spacing-3, $breakpoint-xs, $breakpoint-xl;
		display: flex;
		flex-direction: column;
		padding-right: $spacing-6;

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

			a {
				outline: none;
				transition: color $transition-fast;
			}
		}

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