/**
 * FB Front Lesson Cards
 *
 * Deliberately tiny. The cards themselves are FB Tutorials' own .fbl-card
 * markup, so they are styled by fb-tutorials.css, which is already loaded on
 * this page. All that is needed here is the grid they sit in.
 */

.fbflc-grid {
	display: grid;
	grid-template-columns: repeat(var(--fbflc-cols, 4), minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}

.fbflc-grid > * {
	min-width: 0;
	height: 100%;
}

/* The library grid is designed for two wide columns. At four across the
   title needs to come down a little so it does not wrap to four lines. */
.fbflc-grid .fbl-title {
	font-size: 19px;
}

.fbflc-grid .fbl-card {
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.fbflc-grid .fbl-card:hover {
	transform: translateY(-3px);
	border-color: rgba(139, 123, 255, .45);
	box-shadow: 0 18px 46px rgba(0, 0, 0, .42);
}

@media (prefers-reduced-motion: reduce) {
	.fbflc-grid .fbl-card,
	.fbflc-grid .fbl-card:hover {
		transition: none;
		transform: none;
	}
}

@media (max-width: 1100px) {
	.fbflc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.fbflc-grid {
		grid-template-columns: 1fr;
	}

	.fbflc-grid .fbl-title {
		font-size: 20px;
	}
}