/* Shared approved illustrated quick cards for topic navigation. */
.topic-hub__quick-grid--illustrated .topic-hub__quick-card {
	position: relative; display: flex; flex-direction: column; align-items: flex-start;
	min-width: 0; min-height: 236px; padding: 20px 18px 42px; gap: 8px;
	border: 1px solid #dedfd8; border-radius: 16px; background: #fffefa;
	color: #263d45; text-align: left; text-decoration: none;
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease;
}
.topic-hub__quick-grid--illustrated .topic-hub__icon-well { display: grid; place-items: center; flex: 0 0 auto; width: 88px; height: 88px; margin-bottom: 8px; }
.topic-hub__quick-grid--illustrated :is(.care-quick-art, .development-quick-art, .sleep-quick-art, .health-quick-art) { display: block; width: 88px; height: 88px; overflow: hidden; }
.topic-hub__quick-grid--illustrated strong { display: block; max-width: 100%; font-family: var(--mamer-font-ui); font-size: 16px; line-height: 1.4; font-weight: 700; }
.topic-hub__quick-grid--illustrated small { display: block; max-width: 100%; color: #53646b; font-size: 13px; line-height: 1.5; }
.topic-hub__quick-grid--illustrated strong, .topic-hub__quick-grid--illustrated small { white-space: normal; word-break: normal; overflow-wrap: normal; hyphens: none; }
.topic-hub__quick-grid--illustrated .topic-hub__quick-arrow { position: absolute; right: 18px; bottom: 15px; color: #406c60; font-size: 21px; line-height: 1; }
.topic-hub__quick-grid--illustrated [data-tone="amber"] { border-color: #e1d9c8; }
.topic-hub__quick-grid--illustrated .is-directory { display: grid; grid-template-columns: 28px minmax(0, 1fr) 24px; grid-column: 1 / -1; gap: 2px 12px; min-height: 76px; padding: 16px 20px; background: #f3f5ef; border-color: #d5dfd4; }
.topic-hub__quick-grid--illustrated .is-directory .topic-hub__icon-well { grid-column: 1; grid-row: 1 / 3; align-self: center; width: 28px; height: 28px; margin: 0; color: #406c60; }
.topic-hub__quick-grid--illustrated .is-directory svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.topic-hub__quick-grid--illustrated .is-directory strong, .topic-hub__quick-grid--illustrated .is-directory small { grid-column: 2; }
.topic-hub__quick-grid--illustrated .is-directory .topic-hub__quick-arrow { position: static; grid-column: 3; grid-row: 1 / 3; align-self: center; }
.topic-hub__quick-grid--illustrated .topic-hub__quick-card:focus-visible { outline: 3px solid #406c60; outline-offset: 4px; }
.topic-hub__quick-grid--illustrated .topic-hub__quick-card:active { background: #edf2e9; border-color: #406c60; }
@media (hover: hover) and (pointer: fine) { .topic-hub__quick-grid--illustrated .topic-hub__quick-card:hover { transform: translateY(-2px); border-color: #6e907e; box-shadow: 0 8px 22px #273d4510; } }
@media (min-width: 1024px) and (max-width: 1279px) { .topic-hub__quick-grid--illustrated { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) {
	.topic-hub__quick-grid--illustrated .topic-hub__quick-card { padding: 16px 14px 38px; min-height: 218px; border-radius: 14px; }
	.topic-hub__quick-grid--illustrated .topic-hub__icon-well, .topic-hub__quick-grid--illustrated :is(.care-quick-art, .development-quick-art, .sleep-quick-art, .health-quick-art) { width: 76px; height: 76px; }
	.topic-hub__quick-grid--illustrated strong { font-size: 15px; }
	.topic-hub__quick-grid--illustrated .is-directory { min-height: 76px; padding: 16px 14px; }
	.topic-hub__quick-grid--illustrated .is-directory .topic-hub__icon-well { width: 28px; height: 28px; }
	.topic-hub__quick-grid--illustrated .topic-hub__quick-arrow { right: 14px; bottom: 13px; }
}
@media (prefers-reduced-motion: reduce) { .topic-hub__quick-grid--illustrated .topic-hub__quick-card { transition: none; } .topic-hub__quick-grid--illustrated .topic-hub__quick-card:hover { transform: none; } }


@media (min-width: 1280px) { .topic-hub[data-topic-hub="development"] .topic-hub__quick-grid--illustrated { grid-template-columns: repeat(5, minmax(0, 1fr)); } }


@media (min-width: 1280px) { .topic-hub[data-topic-hub="sleep"] .topic-hub__quick-grid--illustrated { grid-template-columns: repeat(4, minmax(0, 1fr)); } }