/* /resources/css/grade-1-fractions-concepts.css — styles for grade-1-fractions-concepts.html */

.frac-visual { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin:16px 0; }
    .frac-item { text-align:center; }
    .frac-circle { width:80px; height:80px; border-radius:50%; border:3px solid var(--rp); position:relative; overflow:hidden; margin:0 auto 6px; }
    .frac-half-fill { position:absolute; left:0; top:0; width:50%; height:100%; background:var(--rp); opacity:.7; }
    .frac-quarter-fill { position:absolute; left:0; top:0; width:50%; height:50%; background:var(--rp); opacity:.7; }
    .frac-third-fill { position:absolute; left:0; top:0; width:33.3%; height:100%; background:var(--rp); opacity:.7; }
    .frac-rect { width:120px; height:40px; border:3px solid var(--rp); position:relative; overflow:hidden; margin:0 auto 6px; }
    .frac-rect-half { position:absolute; left:0; top:0; width:50%; height:100%; background:var(--rp); opacity:.7; }
    .frac-rect-qtr { position:absolute; left:0; top:0; width:25%; height:100%; background:var(--rp); opacity:.7; }
    .frac-label { font-size:1.1rem; font-weight:600; color:var(--rt); }
    .frac-sub { font-size:.85rem; color:var(--rm); }