.supt-section-cards {
	@mixin clamp --section-spacing, $spacing-8, $spacing-16, $breakpoint-xs, $breakpoint-xl;
	overflow: hidden;
	padding-top: var(--section-spacing);
	background: $color-grey-background;

	&__inner {
		display: flex;
		flex-direction: column;
	}

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

	&__description {
		@extend %t-body-m-s;
		margin-top: $spacing-4;
		color: $color-grey-5;
	}

	&__list {
		display: flex;
		width: 100%;
		padding-top: $spacing-6;
		padding-bottom: var(--section-spacing);
		--card-gutter: $spacing-1-5;

		@media (min-width: $breakpoint-md) {
			padding-top: $spacing-8;
			--card-gutter: $spacing-2;
		}

		@media (max-width: calc($breakpoint-xl - 1px)) {
			overflow-x: auto;
			flex-wrap: nowrap;
			scroll-snap-type: x mandatory;
			-webkit-overflow-scrolling: touch;

			width: auto;
			margin-inline: calc(-1 * var(--supt-container-padding-inline));
			padding-inline: var(--supt-container-padding-inline);
			scroll-padding-inline: var(--supt-container-padding-inline);

			/* Hide scrollbar */
			scrollbar-width: none; /* Firefox */
			-ms-overflow-style: none; /* IE and Edge */
			&::-webkit-scrollbar {
				display: none; /* Chrome, Safari, Opera */
			}
		}
	}

	&__item {
		flex: 1 0 83.3333%;
		padding-inline: var(--card-gutter);

		@media (min-width: $breakpoint-md) {
			flex-basis: 52%;
		}

		@media (max-width: calc($breakpoint-xl - 1px)) {
			scroll-snap-align: start;
		}

		@media (min-width: $breakpoint-xl) {
			flex-basis: calc(100% / 3);
		}

		&:first-child {
			margin-left: calc(-1 * var(--card-gutter));
		}
		&:last-child {
			margin-right: calc(-1 * var(--card-gutter));
		}

		> * {
			height: 100%;
		}
	}

	&[data-nb-cards='1'] {
		.supt-section-cards__list {
			justify-content: center;
		}

		.supt-section-cards__item {
			flex-basis: 50%;
		}

		.supt-card-text {
			@media (min-width: $breakpoint-md) {
				display: grid;
				grid-template-areas:
					'head body'
					'head foot';
			}

			&__head {
				@media (min-width: $breakpoint-md) {
					grid-area: head;
				}
			}
			&__body {
				@media (min-width: $breakpoint-md) {
					grid-area: body;
					align-self: flex-end;
				}
			}
			&__foot {
				@media (min-width: $breakpoint-md) {
					grid-area: foot;
					align-self: flex-start;
				}
			}
		}
	}

	&[data-nb-cards='2'] {
		@media (min-width: $breakpoint-md) {
			.supt-section-cards__list {
				justify-content: center;

				overflow-x: hidden;
			}

			.supt-section-cards__item {
				flex-basis: 50%;
				flex-grow: 0;
				&:first-child {
					padding-left: 0;
				}
				&:last-child {
					padding-right: 0;
				}
			}
		}
	}

	&.-no-slides {
		.supt-section-cards__list {
			@media (max-width: calc($breakpoint-xl - 1px)) {
				display: flex;
				row-gap: $spacing-12;
				flex-wrap: wrap;
				overflow: hidden;
				scroll-snap-type: none;
				width: 100%;
				margin-inline: 0;
				padding-inline: 0;
				scroll-padding-inline: 0;
			}
		}
		.supt-section-cards__item {
			@media (max-width: calc($breakpoint-md - 1px)) {
				padding: 0;
				margin: 0;
			}
		}
	}

	& + .supt-section-cards[data-nb-cards='1'] {
		padding-top: 0;
	}
}