@import '@resources/index.css';

.supt-section-logoboard {
	.block-editor-block-list__layout {
		width: 100%;
		height: 100%;

		display: flex;
		flex-flow: row wrap;
		align-items: center;
		justify-content: center;
	}

	&__content {
		.supt-button {
			opacity: 1;
		}
	}

	.wp-block[data-type='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
			);
		}
	}
}