/* Classes and Textbooks: shared geometry for the migrated lesson cards.
 * Loaded only for this page. Avoid relying on mixed Bootstrap 3/4 columns.
 */
.joi-content :is(.survival-card, .lesson-card, .lrc-card, .tensaku-card) > .row {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	margin-right: 0;
	margin-left: 0;
}

.joi-content :is(.survival-card, .lesson-card, .lrc-card, .tensaku-card) > .row > div {
	width: auto;
	max-width: none;
	min-width: 0;
	padding: 0;
	float: none;
}

.joi-content :is(.survival-card, .lesson-card, .lrc-card, .tensaku-card) .img-responsive {
	display: block;
	width: 180px;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

/* Restore the teacher-and-description rows in both Kanji cards as well. */
.joi-content :is(.n4-card-row, .n1-card-row) {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.joi-content :is(.n4-text, .n1-text) {
	min-width: 0;
}

@media (max-width: 767.98px) {
	.joi-content :is(.survival-card, .lesson-card, .lrc-card, .tensaku-card) > .row,
	.joi-content :is(.n4-card-row, .n1-card-row) {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
}