.GridRep {
  aspect-ratio: 3/2;
  border-radius: $card-corner;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: $unit;
  padding: $unit-2x;
  max-width: 320px;

  &:hover {
    background: var(--grid-rep-hover);

    a {
      text-decoration: none;
    }

    h2,
    .Grid {
      cursor: pointer;
    }

    .Grid .weapon {
      box-shadow: inset 0 0 0 1px var(--grid-border-color);
    }

    @include breakpoint(phone) {
      background: inherit;

      .Grid .weapon {
        box-shadow: none;
      }
    }
  }

  .Grid {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    gap: $unit;

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

    .grid_mainhand {
      $d: 64px;
      aspect-ratio: 200 / 418;
      height: auto;
      max-width: $d;
      min-width: $d;
    }

    .grid_weapons {
      $p: 29.5%;
      box-sizing: border-box;
      display: grid;
      grid-template-columns: fit-content($p) fit-content($p) fit-content($p);
      grid-template-rows: fit-content($p) fit-content($p) fit-content($p);
      gap: $unit;
      margin: 0;
      padding: 0;
      width: 100%;
    }

    .grid_weapon {
      aspect-ratio: 160 / 92;
    }

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

  .Details {
    display: flex;
    flex-direction: column;
    gap: calc($unit / 2);

    h2 {
      color: var(--text-primary);
      font-size: $font-regular;
      overflow: hidden;
      padding-bottom: 1px;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 258px; // Can we not do this?

      &.empty {
        color: var(--text-tertiary);
      }
    }

    .top {
      display: flex;
      flex-direction: row;
      gap: calc($unit / 2);
      align-items: center;

      .info {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        gap: calc($unit / 2);
      }

      button svg {
        width: 14px;
        height: 14px;
      }
    }

    .bottom {
      display: flex;
      flex-direction: row;

      a.user:hover {
        color: var(--link-text-hover);
      }
    }

    .raid,
    .user,
    time {
      color: $grey-55;
      font-size: $font-small;
    }

    .raid,
    .user {
      flex-grow: 1;
    }

    .raid {
      margin-bottom: calc($unit / 2);
    }

    .user {
      display: flex;
      gap: calc($unit / 2);
      align-items: center;

      img,
      .no-user {
        $diameter: 18px;

        border-radius: calc($diameter / 2);
        height: $diameter;
        width: $diameter;
      }

      img.gran {
        background-color: #cee7fe;
      }

      img.djeeta {
        background-color: #ffe1fe;
      }

      .no-user {
        background: $grey-80;
      }
    }
  }
}