.ct-demos-list-container {
	container-type: inline-size;

	.ct-demo-list {
		display: grid;
		grid-column-gap: 30px;
		grid-row-gap: 30px;
		list-style: none;
		margin: 0;
		padding: 30px 0 0 0;
		border-top: 1px dashed #eee;

		@container (min-width: 650px) {
			grid-template-columns: repeat(2, 1fr);
		}

		@container (min-width: 950px) {
			grid-template-columns: repeat(3, 1fr);
		}

		li {
			display: flex;
			flex-direction: column;
			margin: 0;
			box-sizing: border-box;
			box-shadow: 0 2px 5px rgba(143, 163, 184, 0.12);

			figure {
				display: flex;
				flex-direction: column;
				position: relative;
				aspect-ratio: 4/3;
				margin: 0;
				overflow: hidden;
				isolation: isolate;
				border-radius: 3px 3px 0 0;

				img {
					max-width: 100%;
					aspect-ratio: inherit;
				}

				section {
					position: absolute;
					z-index: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					inset: 0;
					opacity: 0;
					color: #fff;
					text-align: center;
					padding: 23px;
					background: rgba(36, 41, 45, 0.85);
					backdrop-filter: blur(10px);
					transition: opacity 0.2s ease;

					h3 {
						font-size: 15px !important;
						color: #fff !important;
						margin-bottom: 12px !important;
					}

					span {
						opacity: 0.75;
					}

					.ct-required-plans {

						&:not(:last-child) {
							padding-bottom: 25px;
							margin-bottom: 25px;
							border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
						}
					}
				}
			}

			&:hover {
				figure > section {
					opacity: 1;
				}
			}

			// pro
			&.ct-is-pro figure {
				position: relative;

				.ct-pro-badge {
					display: flex;
					justify-content: center;
					position: absolute;
					// z-index: 1;
					top: 20px;
					inset-inline-end: 20px;
					font-size: 12px;
					font-weight: 700;
					letter-spacing: .03em;
					color: rgb(161,104,13);
					text-decoration: none;
					padding: 5px 10px;
					background: #ffc568;
					border-radius: 3px;
					box-shadow: 0 5px 8px 0 rgba(234,157,33,.3);
				}
			}
		}
	}
}

.ct-demo-actions {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 17px 20px;
	border-radius: 0 0 3px 3px;
	border: 1px solid rgba(226, 230, 235, 0.7);
	background: rgba(235, 237, 241, 0.2);

	@media (max-width: 549px) {
		flex-direction: column;
	}

	@media (min-width: 550px) {
		justify-content: space-between;
	}

	h4 {
		margin: 0 !important;
		font-size: 14px;

		@media (max-width: 549px) {
			margin-bottom: 20px;
		}
	}

	> div {
		display: flex;
		gap: 10px;
	}

	button[disabled] {
		opacity: 0.3;
		user-select: none;
		pointer-events: none;
	}
}