.cards:has(.learning-card-image){grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:16px}.cards .card:has(.learning-card-image){min-width:0;padding:12px;overflow:hidden}.learning-card-image-frame{aspect-ratio:3/2;background:var(--card);border-radius:8px;flex:none;width:100%;margin-bottom:6px;display:block;overflow:hidden}.card .learning-card-image{object-fit:cover;object-position:center;width:100%;height:100%;display:block}.card:focus-visible{outline:3px solid var(--ramadan-gold);outline-offset:3px}.cards .card strong,.cards .card span,.cards .card em{overflow-wrap:anywhere}.cards .card .card-copy{flex:1}.cards .card em{margin-top:auto;padding-top:6px}.learning-card-image-frame[data-image-kind=letters] .learning-card-image{object-fit:contain}.learning-card-image-frame[data-image-kind=qaida] .learning-card-image{object-position:center 42%;transform:scale(1.08)}.learning-card-image-frame[data-image-kind=quran] .learning-card-image{object-position:center 65%}.learning-card-image-frame[data-image-kind=memorize] .learning-card-image{object-position:45% 75%;transform:scale(1.15)}.learning-card-image-frame[data-image-kind=salah] .learning-card-image{object-position:center 70%;transform:scale(1.06)}.learning-card-image-frame[data-image-kind=night]{aspect-ratio:16/10}.learning-card-image-frame[data-image-kind=night] .learning-card-image{object-position:center 20%}.learning-card-image-frame[data-image-kind=duas] .learning-card-image{object-position:center 60%}.learning-card-image-frame[data-image-kind=sunnah] .learning-card-image{object-position:65% 60%;transform:scale(1.12)}.learning-card-image-frame[data-image-kind=kids] .learning-card-image{object-fit:contain}.cards .card.ramadan-card{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:24px;padding:12px;display:grid}.card.ramadan-card .learning-card-image-frame{aspect-ratio:16/9;margin:0}.card.ramadan-card .learning-card-image{object-position:center 35%}.card.ramadan-card .card-copy{padding:12px}.card.ramadan-card strong{align-items:center;gap:8px;display:flex}.card.ramadan-card strong svg{flex:none;width:24px;height:24px}@media (width<=600px){.cards .card.ramadan-card{grid-template-columns:minmax(0,1fr);gap:8px}.card.ramadan-card .card-copy{padding:4px}}
