.wrapper {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-auto-rows: 20px;
  gap: 20px;
  border-top: 3px double #c5b089;
  border-bottom: 3px double #c5b089;
  padding: 5px;
  color:#594639;
}
.name {
  grid-column: col-start 1/ span 7;
  border-bottom: 3px dotted #b59f76;
  align-content: center;
  grid-row: 1 / span 2;
}
.magic-icon-top {
  grid-column: col-start 8/ span 3;
  justify-self:end;
  padding-top: 5px;
  grid-row: 1 / span 2;
}
.magic-icon-top img{
  	width: 20px;
    margin: 2px;
}
.dorm-icon {
  grid-column: col-start 11 / span 2;
  grid-row: 1 / -1;
}
.card-image{
  grid-column: col-start 1 / span 8;
  grid-row: 3;
}
.card-status{
  grid-column: col-start 9 / span 4;
  font-size:10px;
  grid-row: 3;
}
.magic-title{
   grid-column: col-start 1 / -1;
   grid-row: 10;
}
.magic-title p{
   background-color: #b59f76;
   color: white;
   padding: 3px 10px;
}
.magic1-icon{
   grid-column: col-start 2 / span 2;
   grid-row:11;
   justify-content: center;
  font-size:9px;
}
.magic1-icon img{
  	width: 30px;
}
.magic1-desc{
   grid-column: col-start 4 / 11;
   grid-row:11;
   font-size:10px;
}
.magic-name{
   border-bottom: 3px dotted #c5b089;
}
.magic2-icon{
   grid-column: col-start 2 / span 2;
   grid-row:13;
   justify-content: center;
  font-size:9px;
}
.magic2-icon img{
  	width: 30px;
}
.magic2-desc{
   grid-column: col-start 4 / 11;
   grid-row:13;
   font-size:10px;
}
.magic3-icon{
   grid-column: col-start 2 / span 2;
   grid-row:15;
   justify-content: center;
  font-size:9px;
}
.magic3-icon img{
  	width: 30px;
}
.magic3-desc{
   grid-column: col-start 4 / 11;
   grid-row:15;
   font-size:10px;
}
.buddy-title{
   grid-column: col-start 1 / -1;
   grid-row: 17;
}
.buddy-title p{
   background-color: #c5b089;
   color: white;
   padding: 3px 10px;
}
.buddy1-icon{
   grid-column: col-start 2 / span 2;
   grid-row:18;
   justify-content: center;
  font-size:9px;
}
.buddy1-icon img{
  	width: 50px;
}
.buddy1-desc{
   grid-column: col-start 4 / 11;
   grid-row:18;
   font-size:10px;
}
.buddy-name{
   border-bottom: 3px dotted #c5b089;
  margin-bottom:5px;
}
.buddy2-icon{
   grid-column: col-start 2 / span 2;
   grid-row:20;
   justify-content: center;
  font-size:9px;
}
.buddy2-icon img{
  	width: 50px;
}
.buddy2-desc{
   grid-column: col-start 4 / 11;
   grid-row:20;
   font-size:10px;
}
.buddy3-icon{
   grid-column: col-start 2 / span 2;
   grid-row:22 / span 3;
   justify-content: center;
  font-size:9px;
}
.buddy3-icon img{
  	width: 50px;
}
.buddy3-desc{
   grid-column: col-start 4 / 11;
   grid-row:22;
   font-size:10px;
}