.accessories {
  display: grid;
  gap: $unit;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

  @include breakpoint(tablet) {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 0;
  }
}

.equippedAccessory {
  display: flex;
  flex-direction: column;
  gap: $unit-2x;

  h3 {
    margin: 0;
  }

  .accessory {
    display: flex;
    flex-direction: column;
    gap: $unit;

    h4 {
      font-size: $font-small;
      font-weight: $medium;
      text-align: center;
    }

    img {
      border-radius: $item-corner;
      width: 150px;
    }
  }
}