/* Share the approved English hierarchy and controls, with subject illustrations
   from the established SVG icon set. No new game runtime is needed. */
.learning-area-grid,.learning-game-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.learning-area-family { max-width:680px; width:100%; }
.learning-area-family:only-child { max-width:none; }
.learning-area-icon .icon { width:88px; height:88px; color:var(--c); }
.learning-area-family:nth-child(3n+2) .english-area-art { background:#ffe8bc; }
.learning-area-family:nth-child(3n) .english-area-art { background:#d1f4dc; }
.learning-banner-icon { display:flex; align-items:center; justify-content:center; flex:none; width:124px; height:124px; border-radius:50%; background:#fff9; }
.learning-banner-icon .icon { width:92px; height:92px; color:var(--c); }
.learning-game-icon { display:flex; align-items:center; justify-content:center; width:116px; height:116px; margin:16px auto; background:var(--t); color:var(--c); border-radius:var(--radius); }
.learning-game-icon .icon { width:70px; height:70px; }
.learning-game-grid .english-game-card { max-width:680px; }
.learning-area-lesson h3 { margin-top:0; }
.learning-area-lesson h4 { font-size:1.15rem; }
@media(max-width:760px) {
 .learning-banner-icon { width:64px; height:64px; }
 .learning-banner-icon .icon { width:48px; height:48px; }
 .learning-banner { align-items:flex-start; }
 .learning-banner > div { min-width:0; }
 .learning-collection .learning-banner { flex-direction:column-reverse; }
 .learning-collection .english-banner h1 { font-size:2rem; }
 .learning-area-grid,.learning-game-grid { grid-template-columns:1fr; }
}
/* One card size for every topic and game grid: fewer cards stay card-sized and centred. */
@media(min-width:761px) {
 .english-area-grid,.english-game-grid,.learning-area-grid,.learning-game-grid { grid-template-columns:repeat(auto-fit,minmax(260px,330px)); justify-content:center; }
 .learning-area-family,.learning-area-family:only-child,.learning-game-grid .english-game-card { max-width:none; }
}
.english-game-card .learning-game-icon { width:104px; height:104px; margin:12px auto 16px; }
.english-game-card .english-game-meta { margin-top:auto; padding-top:12px; }