.wonderkids-grid display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; padding: 2rem;
select, button background: #2f4f3a; border: none; color: white; padding: 0.3rem 1rem; border-radius: 30px; font-weight: bold; cursor: pointer; margin-left: 0.5rem; font-family: monospace;
function renderCards(filterPos = "all") const grid = document.getElementById("wonderkidsGrid"); const filtered = filterPos === "all" ? wonderkids : wonderkids.filter(wk => wk.position === filterPos);
.details display: flex; gap: 0.8rem; margin: 0.6rem 0; font-size: 0.85rem; color: #4a4a2a;
.filter-group background: #fff2df; padding: 0.4rem 1rem; border-radius: 40px; box-shadow: inset 0 1px 2px #0001, 0 1px 0 white;
button background: #8b5a2b; transition: 0.1s linear;
.filter-group label font-weight: bold; font-size: 0.8rem; text-transform: uppercase; color: #4a3a1a;
button:hover background: #b87c3a; transform: scale(0.97);