.classes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; }
.class-item {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 1.5rem 1rem;
  background: rgba(26,18,8,0.06); border: 1px solid rgba(201,146,42,0.15);
  transition: all 0.3s ease; cursor: default;
}
.class-item:hover { border-color: rgba(201,146,42,0.4); transform: translateY(-2px); }
.class-emoji { font-size: 2rem; }
.class-name {
  font-family: 'Cinzel', serif; font-size: 0.8rem;
  letter-spacing: 0.1em; color: var(--ink); text-transform: uppercase;
}