.bar-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 2px;
}

.skill-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

.skill-wrapper > .skill {
  text-align: right;
}

.bar-wrapper > .bar > .value {
  background: green;
  width: 20%;
  height: 4px;
  position: relative;
}

.bar-wrapper > .bar {
  border: 1px solid black;
  background-image: url("/png/bg2.png");
  width: 100%;
  height: 4px;
  position: relative;
  cursor: pointer;
}