.grid{
 display:grid;
 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 grid-auto-rows: 1fr;
}
.charcard{
 text-align:center;
}
.charcard img:hover{
  box-shadow:0 0 10px 5px var(--charcolor);
}
/*RUINA-SPECIFIC: History:#B28F5E,*/
.charcard img{
  
 width: 150px;
 height:150px;
}

@media (max-width: 600px){
  .charcard img{
  
 width:100px;
 height:100px;
}
}