@import '@resources/index.css';

.supt-section-logoboard {
	&__inner {
		@extend %grid;
		@mixin clamp grid-row-gap, 40, 80, $xxs-breakpoint, $lg-breakpoint;
	}

	&__headline {
		grid-column: 3 / span 8;

		.supt-section__title {
			margin: 0;
		}
	}

	&__content {
		@mixin clamp gap, 40, 80, $xxs-breakpoint, $lg-breakpoint;
		grid-column: 1 / span 12;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		&__grid {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;

			width: 100%;

			gap: $grid-gap;
			@media (min-width: $grid-gap-max-mq) {
				gap: $grid-gap-max;
			}

			.supt-card-logo {
				width: calc(
					(100vw - ($container-min-offset * 2) + $grid-gap) / 12 * 6 -
						$grid-gap - 1px
				);

				@media (min-width: $xs-breakpoint) {
					width: calc(
						(100vw - ($container-min-offset * 2) + $grid-gap) / 12 *
							5 - $grid-gap - 1px
					);
				}
				@media (min-width: $sm-breakpoint) {
					width: calc(
						(100vw - ($container-tablet-offset * 2) + $grid-gap-max) /
							12 * 4 - $grid-gap-max - 1px
					);
				}

				@media (min-width: $md-breakpoint) {
					width: calc(
						(100vw - ($container-laptop-offset * 2) + $grid-gap-max) /
							12 * 3 - $grid-gap-max - 1px
					);
				}
				@media (min-width: $lg-breakpoint) {
					width: calc(
						(
								100vw - ($container-desktop-offset * 2) +
									$grid-gap-max
							) / 12 * 2 - $grid-gap-max - 1px
					);
				}
				@media (min-width: $container-max-width-mq) {
					width: calc(
						($container-max-width + $grid-gap-max) / 12 * 2 -
							$grid-gap-max
					);
				}
			}
		}

		.supt-button {
			width: max-content;
			opacity: 0;
		}
	}
}