// Overall container – never taller than $rep-height:
.rep {
  height: $rep-height;
  display: grid;
  // First column: mainhand width = $rep-height * (200/420)
  // Second column: weapons grid – its width will be auto (we calculate it below)
  grid-template-columns:
    calc(#{$rep-height} * (200 / 420))
    auto;
  gap: $unit-half;
  box-sizing: border-box;
}

/* --- Mainhand image --- */
.mainhand {
  background: var(--card-bg);
  border-radius: 4px;
  height: 100%;
  width: 100%; // takes the grid column’s computed width
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: contain; // or "cover" if you prefer cropping
  }
}

/* --- Weapons grid --- */
.weapons {
  /* Reset default UL spacing */
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;

  display: grid;
  // We know there will be 3 columns and 3 rows.
  // Each row's height is one-third of $rep-height:
  // Subtract the 2 vertical gaps from the total height before dividing:
  grid-template-rows: repeat(
    3,
    calc((#{$rep-height} - (2 * #{$unit-half})) / 3)
  );
  // Each column's width is calculated as: (cell height * (280/160))
  grid-template-columns: repeat(
    3,
    calc((#{$rep-height} - (2 * #{$unit-half})) / 3 * (280 / 160))
  );
  gap: $unit-half;
}

/* Each grid cell (a .weapon) */
.weapon {
  background: var(--card-bg);
  border-radius: 4px;
  overflow: hidden;
  // Center the image (or placeholder) within the cell:
  display: flex;
  align-items: center;
  justify-content: center;

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