/* Wixoss styles */

.wx-grid {
  display: grid;
  grid-template: 
    [row1-start]"image stats" auto [row1-end]
    [row2-start]"image text" 1fr [row2-end]
    / 280px auto;
  grid-row-gap: 15px;
  font-size: 16px;
}
.wx-grid img {
  display: inline-block;
  height: auto;
}
.wx-image {
  grid-area: image;
}
.wx-stats {
  grid-area: stats;
  font-size: 18px;
}
.wx-text {
  grid-area: text;
  text-align: left;
}
.wx-onplay {
  display: inline-block;
  margin-bottom: 2px;
  padding: 1px;
  background-color: #224CA7;
  color: #ffffff;
}
.wx-action {
  display: inline-block;
  margin-bottom: 2px;
  padding: 1px;
  background-color: #00a33a;
  color: #ffffff;
}
.wx-constant {
  display: inline-block;
  margin-bottom: 2px;
  padding: 1px;
  background-color: #e10000;
  color: #ffffff;
}
.wx-auto {
  display: inline-block;
  margin-bottom: 2px;
  padding: 1px;
  background-color: #fb9100;
  color: #ffffff;
}
img.wx-color-icon, img.wx-icon {
  margin:0 0 -4px;
}
img.wx-trap-icon {
  margin: 0 0 -7px;
}
.wx-ability, .wx-cooldown, .wx-phase, .wx-once, .wx-special {
  box-sizing: border-box;
  display: inline-block;
  margin-bottom: 2px;
  padding: 1px;
  border: 2px solid #000000;
  border-radius: 4px;
}
.wx-phase, .wx-special {
  color: #ffffff;
  background-color: #000000;
  border-radius: 0;
}
.wx-once {
  color: #ff3333;
  border-color: #ff3333;
}

@media (max-width: 768px) {
  .wx-grid {
    grid-template: 
    [row1-start]"image" auto [row1-end]
    [row2-start]"stats" auto [row2-end]
    [row3-start]"text" auto [row3-end]
    / auto;
  }
  .wx-image {
    justify-self: center;
  }
}

/*****/