.rep {
  aspect-ratio: 2/0.99;
  border-radius: $card-corner;
  grid-gap: $unit-half; /* add a gap of 8px between grid items */
  height: $rep-height;
  transition: $duration-opacity-fade opacity ease-in;
  opacity: 0.5;

  @include breakpoint(small-tablet) {
    display: none;
  }

  .character,
  .protagonist {
    aspect-ratio: 16 / 33;
    background: var(--card-bg);
    border-radius: 4px;
    box-sizing: border-box;
    display: grid;
    overflow: hidden;

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

  .characters {
    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;
  }

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

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

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

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

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

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

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

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

    &.empty {
      background: var(--card-bg);
    }
  }
}