.supt-section-logoboard {
	@mixin clamp padding-bottom, $spacing-8, $spacing-16, $breakpoint-xs, $breakpoint-xl;
	background: $color-grey-background;

	&__container {
		display: flex;
		flex-direction: column;
		@mixin clamp gap, $spacing-16, $spacing-20, $breakpoint-xs, $breakpoint-xl;
	}

	&__head {
		> *:first-child {
			@mixin clamp padding-top, $spacing-16, $spacing-32, $breakpoint-xs, $breakpoint-xl;
			border-top: 1px solid $color-grey-2;
		}

		h2,
		h3,
		h4 {
			@extend %t-h2;

			margin: 0;
			text-align: center;
		}
	}

	&__description {
		@extend %t-body-sm;
		margin-top: $spacing-4;
		text-align: center;
	}

	&__items-wrapper {
		position: relative;

		.supt-line {
			--line-xs-width: 100%;
			--line-xs-height: 1px;
			--line-md-width: 100%;
			--line-md-height: 1px;

			position: absolute;
			bottom: 0;
			left: 0;

			.supt-line__inner {
				transform: scaleX(0);
			}
		}
	}

	&__items {
		@mixin clamp padding-bottom, $spacing-16, $spacing-32, $breakpoint-xs, $breakpoint-xl;
		border-bottom: 1px solid $color-grey-2;
		padding-inline: $spacing-4;
		display: flex;
		flex-flow: row wrap;
		align-items: end;
		justify-content: center;
		gap: $spacing-20 $spacing-16;
	}

	&__item {
		a {
			display: flex;
		}

		img {
			@mixin clamp height, 48px, 56px, $breakpoint-xs, $breakpoint-xl;
			object-fit: contain;
			object-position: center;
		}

		&.-verisure {
			align-self: center;

			@media (max-width: calc($breakpoint-md - 1px)) {
				flex-basis: 100%;
				display: flex;
				justify-content: center;
			}

			img {
				@mixin clamp height, 100px, 150px, $breakpoint-xs, $breakpoint-xl;
			}
		}
	}

	&:not(.-awards) {
		.supt-section-logoboard__items {
			@media (min-width: $breakpoint-md) {
				display: grid;
				grid-template-areas:
					'logo1 logo2'
					'logo1 logo3';
			}
		}
		.supt-section-logoboard__item {
			&:nth-child(1) {
				grid-area: logo1;
			}
			&:nth-child(2) {
				grid-area: logo2;
			}
			&:nth-child(3) {
				grid-area: logo3;
			}
		}
	}

	&.-awards {
		.supt-section-logoboard__items {
			@mixin clamp padding-inline, $spacing-4, $spacing-24, $breakpoint-xs, $breakpoint-xl;
			@mixin clamp row-gap, $spacing-16, $spacing-24, $breakpoint-xs, $breakpoint-xl;
			@mixin clamp column-gap, 36, 80, $breakpoint-xs, $breakpoint-xl;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			align-items: center;

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

		.supt-section-logoboard__item {
			display: flex;
			justify-content: center;
			align-items: center;

			img {
				@mixin clamp height, 72px, 100px, $breakpoint-xs, $breakpoint-xl;
				max-width: 100%;
				mix-blend-mode: darken;
			}
		}

		& + .supt-section-copyright {
			padding-top: 0;
		}
	}
}