.inventory {
  position: relative;
  display: grid;
  height: 400px;
  width: 400px;
  grid-template-rows: repeat(
    8,
    minmax(0, 1fr)
  ); /* Each row takes an equal portion of the available height */
  grid-template-columns: repeat(
    8,
    1fr
  ); /* Each column takes an equal portion of the available width */
  grid-template-areas:
    '. . . helm helm . . .'
    'main main . helm helm amul off off'
    'main main . ches ches . off off'
    'main main . ches ches . off off'
    'main main . ches ches . off off'
    '. . lrin belt belt rrin . .'
    'glov glov . pant pant . boot boot'
    'glov glov . pant pant . boot boot'
    '. . . . . . . .';

  gap: 4px;
}
@media only screen and (max-width: 420px) {
  .inventory {
    width: 100%;
    grid-template-rows: repeat(
      8,
      minmax(0, 1fr)
    ); /* Each row takes an equal portion of the available height */
    grid-template-columns: repeat(
      6,
      1fr
    ); /* Each column takes an equal portion of the available width */
    grid-template-areas:
      '. . helm helm amul .'
      'main main helm helm off off'
      'main main ches ches off off'
      'main main ches ches off off'
      'main main ches ches off off'
      '. lrin belt belt rrin .'
      'glov glov pant pant boot boot'
      'glov glov pant pant boot boot';
  }
}



.helm {
  grid-area: helm;
}

.amulet {
  grid-area: amul;
}

.chest {
  grid-area: ches;
}

.pants {
  grid-area: pant;
}

.boots {
  grid-area: boot;
}

.gloves {
  grid-area: glov;
}

.belt {
  grid-area: belt;
}

.leftRing {
  grid-area: lrin;
}

.rightRing {
  grid-area: rrin;
}

.main {
  grid-area: main;
}
.off {
  grid-area: off;
}

.gear_stats {
  .item_base {
    text-transform: uppercase;
  }

  
}

.top {
  line-height: 1;
}
.separator {
  width: 50%;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    oklch(var(--color)),
    transparent
  );
  margin: 5px auto;
  transform: scaleY(0.8);
  border-radius: 8px;
}
.prefix, .suffix {
  line-height: 1.2;
}