.supt-listing-cards {
	@mixin clamp padding-block, $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;
	}

	&__items {
		display: grid;
		grid-template-columns: repeat(1, 1fr);

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

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

	&__foot {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	&[data-page='1'] .supt-listing-cards__items > *:nth-child(n + 10),
	&[data-page='2'] .supt-listing-cards__items > *:nth-child(n + 19),
	&[data-page='3'] .supt-listing-cards__items > *:nth-child(n + 28),
	&[data-page='4'] .supt-listing-cards__items > *:nth-child(n + 37),
	&[data-page='5'] .supt-listing-cards__items > *:nth-child(n + 46),
	&[data-page='6'] .supt-listing-cards__items > *:nth-child(n + 55),
	&[data-page='7'] .supt-listing-cards__items > *:nth-child(n + 64),
	&[data-page='8'] .supt-listing-cards__items > *:nth-child(n + 73),
	&[data-page='9'] .supt-listing-cards__items > *:nth-child(n + 82),
	&[data-page='10'] .supt-listing-cards__items > *:nth-child(n + 91),
	&[data-page='11'] .supt-listing-cards__items > *:nth-child(n + 100),
	&[data-page='12'] .supt-listing-cards__items > *:nth-child(n + 109),
	&[data-page='13'] .supt-listing-cards__items > *:nth-child(n + 118),
	&[data-page='14'] .supt-listing-cards__items > *:nth-child(n + 127),
	&[data-page='15'] .supt-listing-cards__items > *:nth-child(n + 136),
	&[data-page='16'] .supt-listing-cards__items > *:nth-child(n + 145),
	&[data-page='17'] .supt-listing-cards__items > *:nth-child(n + 154),
	&[data-page='18'] .supt-listing-cards__items > *:nth-child(n + 163),
	&[data-page='19'] .supt-listing-cards__items > *:nth-child(n + 172),
	&[data-page='20'] .supt-listing-cards__items > *:nth-child(n + 181) {
		display: none;
	}

	&:not(.-has-more) .supt-listing-cards__foot .supt-button {
		display: none;
	}

	&.-press {
		.supt-listing-cards__items {
			@mixin clamp gap, $spacing-2, $spacing-4, $breakpoint-xs, $breakpoint-xl;
		}
	}
	&.-news {
		.supt-listing-cards__items {
			@mixin clamp row-gap, $spacing-6, $spacing-12, $breakpoint-xs, $breakpoint-xl;
			column-gap: $spacing-4;
		}
	}
}