.CharacterRep {
  aspect-ratio: 2/0.99;
  border-radius: $card-corner;
  grid-gap: $unit-half; /* add a gap of 8px between grid items */
  height: $rep-height;

  .Character {
    background: var(--card-bg);
    border-radius: 4px;
  }

  .GridCharacters {
    display: grid; /* make the right-images container a grid */
    grid-template-columns: repeat(
      4,
      1fr
    ); /* create 3 columns, each taking up 1 fraction */
    gap: $unit-half;
  }

  .Grid.Character {
    aspect-ratio: 16 / 33;
    box-sizing: border-box;
    display: grid;
    overflow: hidden;

    &.MC {
      border-color: transparent;
      border-width: 1px;
      border-style: solid;
      aspect-ratio: 32 / 66;

      img {
        position: relative;
        width: 100%;
        height: 100%;
      }

      &.fire {
        background: var(--fire-hover-bg);
        border-color: var(--fire-bg);
      }

      &.water {
        background: var(--water-hover-bg);
        border-color: var(--water-bg);
      }

      &.wind {
        background: var(--wind-hover-bg);
        border-color: var(--wind-bg);
      }

      &.earth {
        background: var(--earth-hover-bg);
        border-color: var(--earth-bg);
      }

      &.light {
        background: var(--light-hover-bg);
        border-color: var(--light-bg);
      }

      &.dark {
        background: var(--dark-hover-bg);
        border-color: var(--dark-bg);
      }
    }
  }

  .Grid.Character img[src*='jpg'] {
    border-radius: 4px;
    width: 100%;
  }
}