$thumbnail-height: 235px;

.sensei-patterns-list {
	@media ( min-width: 600px ) {
		column-count: 2;
		column-gap: 24px;
	}

	&__item {
		break-inside: avoid-column;
		margin-bottom: 30px;
		cursor: pointer;

		&:last-child {
			margin-bottom: 0;
		}

		&-preview {
			border: 1px solid #f0f0f0;
			background: var(--sensei-background-color-global, var(--sensei-course-theme-background-color, var(--wp--preset--color--background, var(--wp--preset--color--base, #FFFFFF))));
			height: $thumbnail-height;
			overflow: hidden;
			z-index: 1;
			position: relative;

			.block-editor-block-preview__container {
				margin-top: -17px;
			}
		}

		&:hover &-preview,
		&:focus &-preview {
			border-color: var(--wp-admin-theme-color);
		}

		&-title {
			padding-top: 8px;
			font-size: 12px;
			text-align: center;
		}

		&:hover &-title,
		&:focus &-title {
			color: var(--wp-admin-theme-color);
		}
	}

	&__warning {
		width: 100%;
		height: calc(100% - 18px);
		display: flex;
		flex-direction: row;
		align-items: center;

		&-title {
			flex: 1;
			padding: 10px;
			font-size: 14px;
			text-align: center;
		}
	}
}
