hensei-web/components/GridRep/index.scss

.GridRep {
  aspect-ratio: 3/2;
  border-radius: $card-corner;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: $unit;
  padding: $unit-2x;
  min-width: 320px;
  width: 100%;

  &: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 {
    aspect-ratio: 2/0.95;
    display: grid;
    grid-template-columns: 1fr 3.36fr; /* left column takes up 1 fraction, right column takes up 3 fractions */
    grid-gap: $unit; /* add a gap of 8px between grid items */

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

    .Mainhand.Weapon {
      aspect-ratio: 73/153;
      display: grid;
      grid-column: 1 / 2; /* spans one column */
      max-height: 140px;
    }

    .GridWeapons {
      display: grid; /* make the right-images container a grid */
      grid-template-columns: repeat(
        3,
        1fr
      ); /* create 3 columns, each taking up 1 fraction */
      grid-template-rows: repeat(
        3,
        1fr
      ); /* create 3 rows, each taking up 1 fraction */
      gap: $unit;
      // column-gap: $unit;
      // row-gap: $unit-2x;
    }

    .Grid.Weapon {
      aspect-ratio: 280 / 160;
      display: grid;
    }

    .Mainhand.Weapon img[src*='jpg'],
    .Grid.Weapon img[src*='jpg'] {
      border-radius: 4px;
      width: 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);
      }
    }

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

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

    .Properties {
      .auto {
        display: inline-flex;
        gap: $unit-half;
        flex-direction: row;
        margin-left: $unit-half;
      }

      .full_auto {
        color: var(--full-auto-label-text);
      }

      .auto_guard {
        width: 12px;
        height: 12px;

        svg {
          fill: var(--full-auto-label-text);
        }
      }
    }

    .raid {
      color: var(--text-primary);
      margin-bottom: calc($unit / 2);

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

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