.supt-esg-listing-cards {
	@mixin clamp padding-top, $spacing-16, $spacing-32, $breakpoint-xs, $breakpoint-xl;
	@mixin clamp padding-bottom, $spacing-8, $spacing-16, $breakpoint-xs, $breakpoint-xl;

	background-color: $color-grey-background;

	.container {
		display: flex;
		flex-direction: column;
		@mixin clamp gap, $spacing-8, $spacing-12, $breakpoint-xs, $breakpoint-xl;
	}

	&__header {
		display: flex;

		@media (max-width: calc($breakpoint-lg - 1px)) {
			flex-direction: column;
			gap: $spacing-8;
			justify-content: space-between;
		}

		&-content {
			display: flex;
			flex-direction: column;
			@mixin clamp gap, $spacing-3, $spacing-4, $breakpoint-xs, $breakpoint-xl;

			@media (min-width: $breakpoint-md) {
				width: 75%;
			}
			@media (min-width: $breakpoint-lg) {
				width: 50%;
			}

			h2 {
				@extend %t-h2;
				margin: 0;
			}

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

				margin: 0;
			}
		}

		&-button {
			@media (min-width: $breakpoint-lg) {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				width: 50%;
			}
		}
	}

	&__items {
		@mixin clamp gap, $spacing-2, $spacing-4, $breakpoint-xs, $breakpoint-xl;
		display: grid;
		align-items: stretch;

		@media (min-width: $breakpoint-md) {
			grid-template-columns: repeat(2, 1fr);
		}

		.supt-card-press-release {
			height: 100%;
		}
	}
}