style.scss

$actions-height: 92px;

.edit-site-start-template-options__modal {
	.edit-site-start-template-options__modal__actions {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: $actions-height;
		background-color: $white;
		margin-left: - $grid-unit-40;
		margin-right: - $grid-unit-40;
		padding-left: $grid-unit-40;
		padding-right: $grid-unit-40;
		border-top: 1px solid $gray-300;
		z-index: z-index(".edit-site-start-template-options__modal__actions");
	}

	.block-editor-block-patterns-list {
		// Since the actions container is positioned absolutely,
		// this padding bottom ensures that the content wrapper will properly
		// detect overflowing content and start showing scrollbars at the right
		// moment. Without this padding, the content would render under the actions
		// bar without causing the wrapper to show a scrollbar.
		padding-bottom: $actions-height;
	}
}

.edit-site-start-template-options__modal-content .block-editor-block-patterns-list {
	column-count: 2;
	column-gap: $grid-unit-30;

	// Small top padding required to avoid cutting off the visible outline when hovering items
	padding-top: $border-width-focus-fallback;

	@include break-medium() {
		column-count: 3;
	}

	@include break-wide() {
		column-count: 4;
	}

	.block-editor-block-patterns-list__list-item {
		break-inside: avoid-column;

		.block-editor-block-patterns-list__item-title {
			display: none;
		}
	}

	.block-editor-block-patterns-list__item {
		// Avoid to override the BlockPatternList component
		// default hover and focus styles.
		&:not(:focus):not(:hover) .block-editor-block-preview__container {
			box-shadow: 0 0 0 1px $gray-300;
		}
	}
}